APP中搜索框的样式以及区别

云和数据西安中心 2018-07-09 13:24:29

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

前言

搜索框是 app 内最常见的控件之一，可以帮助用户快速又精准找到期望的内容与功能。不同的使用场景下，根据页面中搜索的重要程度，搜索框也有着不同的样式。

下面就和大家聊聊常见的四种样式：一级tab、顶部搜索、搜索 icon 、隐藏式搜索。

01.一级tab

位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。设计的时候通常会使用“放大镜” icon ，简单、识辨度高符合用户已有的认知。

部分 app 会在一级 tab 中设置“发现”入口来承接搜索功能，在“发现”页面中，由于增加其他运营内容导致流量被分摊，搜索相对就会弱一些。

一级 tab 相比其他方式，搜索过程更方便，点击操作更容易。

例如在贝壳找房 app 中，“找”作为该 app 的重要功能单独设立一个入口，用户搜索时无需进入二级页面中去完成条件筛选，搜索过程更方便、一目了然。

在筛选中选择总价、房型、特色、朝向等条件后，点击“开始找房”按钮进入搜索结果页。如果在搜索过程中退出，再次回到该页面后，仍会保留上一次操作的结果，方便下次修改和查找。

贝壳找房和 App Store 搜索入口在底部导航，这个位置符合拇指热力区操作，屏幕偏下的位置单手持握手机的时候更容易点击。

需要注意的是底部导航的数量有限。在底部导航超过5个的时候不建议在底部再增加入口，过于拥挤不适合用户点击。

02.顶部搜索

位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。当用户浏览的时候，搜索框也会悬停在顶部，不断引导用户进行搜索。

通常以搜索框的形式存在，为了突出搜索框，搜索框会有浅灰色的底/描边/投影、带颜色的导航衬底或者有明显的提示语。

不同类型的 app 搜索功能也不一样，除了文本搜索，淘宝有图片搜索功能，方便拍图找物；虾米音乐还有语音搜索功能，方便查歌找曲。

顶部搜索相比其他方式，搜索入口更显眼，为转化提供更多流量。

例如在天猫 app 中，当用户进入的时候，部分是带着明确的购买意图，这时就需要让他们快速找到搜索功能。所以天猫 app 把搜索框置顶在导航栏上，即使是在上滑的时候，也是在顶部。

在顶部搜索框内推荐了客厅地毯，根据用户的历史搜索行为触发的引导，在用户已经搜索的基础上，转化率会大大的提升。 App 运营还会根据热点、时节更换搜索框的预设关键词，能吸引更多的点击量。

需要注意的是结合场景去使用搜索功能，例如支付宝，刚进入 app 用户可能找不到想要的功能在哪里，这时候搜索框置顶让用户方便去查找。但是当用户在向下浏览的时候，用户想要浏览推荐内容，搜索功能相对减弱，为了减少空间占用，搜索框变搜索 icon 。

03.搜索icon

使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。设计的时候通常也会使用“放大镜” icon 。

搜索 icon 相比其他方式，搜索位置更灵活，可以单独出现，也可以和其他功能组合。

当搜索功能在页面中不再是高频使用功能时，仅通过搜索 icon 让用户知晓有搜索功能存在即可。由于搜索 icon 占用区域少，可与其他功能组合出现，例如 in ；也可单独出现，如猫眼，仅靠图标标红来提示用户此功能。

需要注意的是在同一个 app 的不同页面中，由于对搜索功能的需求不同，有些页面会选择搜索 icon ，有些页面会选择顶部导航。例如天猫 app ，在品牌页面中，对于用户即将浏览的内容都是根据用户行为产生和运营推荐的，自然搜索功能也会弱一些，采用搜索icon 即可。天猫首页强调引导用户去搜索、购买商品，采用顶部搜索框。

04.隐藏式搜索

位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。微信首页的搜索功能在初始进入时是隐藏的，当用户下拉页面时，顶部搜索框才会出现，这就和使用场景密不可分。

微信首页（iOS端）刚进来的时候主要以处理最近回复为主，搜索功能相对弱化，在用户浏览列表的时候，搜索框也不会悬停在顶部导航。而在第二个 tab 通讯录列表中，主要以查找联系人为主，搜索功能一开始进入就显示在列表顶部。

总结

绝大部分的 app 里带有搜索功能，搜索功能可以帮助用户快速找到所需内容，减少时间成本。搜索也是提高流量的重要入口，吸引用户注意力。

但想要搜索在页面中恰如其分的应用并不那么容易，需要引导用户行为和分析使用场景，这就依赖我们前期大量样式积累，才能输出合理的设计方式。

我们再来回顾文中提及的四种搜索框样式：

1.一级 tab ：位于屏幕底部的导航，搜索作为一个独立的入口，适用于搜索场景相对重要的 app 。

2.顶部搜索：位于屏幕顶部的导航，让用户打开 app 想要搜索时能快速找到，符合用户期待，适用于当前搜索频率高的页面。

3.搜索 icon ：使用 icon 作为搜索点击区域，减少导航栏占用，弱化了搜索功能，适用于当前搜索频率较低的页面。

4.隐藏式搜索：位于屏幕顶部的导航，以搜索框的形式。只会在用户需要的时候才出现，平时不会打乱用户的行为。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

UI新手到底先该掌握哪些技能如何入门

云和数据西安中心 2018-08-02 10:21:57

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

深知想做UI这行却不知道如何开始是很多小伙伴们的困扰。虽然很多朋友都问过其他人,或者问过很多大神:“我很喜欢UI,可是我应该怎么开始?很多小伙伴对UI特别感兴趣，就是不知道怎么开始，怎么选择自己的工具，怎么选择公司等等都非常迷茫，希望这篇文章能为小伙伴们解答疑惑。

技能选择

选择什么样的工具，该用什么软件，是大多数小伙伴纠结的一点，学习是需要成本的现在我们熟知的软件大致如下：

熟悉的朋友从图中可以看出，Adobe系列工具仍是最主流的设计工具，下面为大家一一介绍这些技能的优缺点。

Photoshop

优点:最主流的设计工具,处理图片强大,调色功能强大,无论是设计图标还是设计界面一定是最佳选择。无论身居什么职位的设计师,都必须具备的基本技能。运用熟练后,即使绘制3D强质感效果也不是问题

缺点:需根据尺寸设计,无法绘制矢量图形(随意放大缩小),排版功能弱。

Ai

优点:强大的矢量图设计工具,绘制ogo、海报等极为优秀。图标和界面功能同样优秀,而且输出为矢量图,可以根据尺寸不同放大缩小。同样不会第三方草图设计工具,还可以用A来设计交互草图。运用熟练实现3D强质感无压力。排版功能相对也较强大。

缺点:图片处理为零,滤镜效果能力较差,处理高质量界面和图标教PS和其他工具会辛苦很多,从像印刷尺寸变成像素尺寸较痛苦。

AE

优点:强大的视频、交互动效工具,可以轻松实现界面交互动画及,和开发人员沟通成本大大降低,同时可以用视觉图来为自己意愿说话。同时可以通过学AE来做视频,加。国内最早运用并推广的是郁闷的鸡大神。

缺点:无法设计界面、图标、绘制图形,只能做交互动效和视频处理。

Flash

优点:矢量动画的利器,制作矢量动画简单方便。通过学习高级的语言,可以设计非常绚丽的交互网站,早些年最流行的酷炫交互网站都是由 FLash嵌入执行。同时也可以制作动画片。设计卡通类图标简单快捷。

缺点:对Ui设计功能较少,界面设计相对困难,图形处理效果少。语言学起来相对高级,同样不适合设计师们。不建议UI设计师学习。

indesign

优点:排版神器,杂志、书籍、报纸等排版快捷方便,上手简单,可以绘制简单的矢量图形

缺点:主要是平面设计师工具,不建议Ui设计师学习。若不从事大量排版工作不建议学习使用。

Dreamweaver

优点:设计网页工具,同时编写查看代码同时设计网页,嵌入fash、管理网站后台等都方便快捷。也可以进行图形绘制。

缺点:主要是网页设计师工具,不建议UI设计师学习。而且,你真的想学代码么？

Adobe Premiere

优点:视频剪辑工具,针对电影、短片、视频等进行编辑功能强大,早起民间流行用作恶搞软件,重要职责是电影的剪辑。

缺点:纯以视频媒介为主,不是作图工具,果断放弃。

Adobe Firewokes

优点:网页设计工具,早期的网页设计利器、切图神器。对图形绘制和界面绘制也很优秀,网页设计三剑客之一。

缺点:如果不是老用户,不建议学习,它的功能被PS和AI逐步替代,已经淡出这个时代。

Core DRAW

优点:结合了AI和ID,是矢量图设计工具,同时也有强大的排版功能。大部分地区仍然在使用这个工具,运用简单易懂,而且能导入 Adobe公司的各种软件工具。

缺点:这款工具争议较大,中小公司仍有使用,但是大互联网公司是没有的。虽然功能很多,但是多不代表精,所以,自己定的目标高一些,放弃这款软件吧

Sketh

优点:最近尤为火爆的设计工具,各大国内外公司都已经开始试用并融合。对于APP应用界面来说,它绝对是利器,方便快捷功能强大,没有繁多不必要的功能。扁平风格图标更是快捷便利,尤其最近的版本3,功能进一步提升。非常推荐

现在的设计师们学习,相信会成为新一代主流设计软件。

缺点:拟物风格图标界面相对不适应,而且现阶段只有苹果系统,微软系统暂时没有。除了设计APP界面,其他功能基本为零。

手绘

优点:是的,不借助任何软件,只要你有强大的美术功底,运用各种画笔工具也可以“设计”出很多精美的图标界面,通过扫描等方式展现给用户,风格特意且新颖,工业设计师的必备能力之一。要知道,会软件的千千万。

缺点:当然在国内,只有这门手艺而走进互联网UI设计师行列的还是少数,所以还是乖乖地挑起一个工具好好学习吧。

core painter

优点:各种笔刷配合手绘板,让你笔下图标界面优美呈现,尤其对游戏UI设计师来说,是强大与PS的软件,因为他优秀的功能专门为手绘而定制。

缺点:如果并不打算好好磨练自己手绘能力的话,尽量避免学习此软件,因为PS基本上都能实现你想要的功能,不要学的太杂,专精

3D maxS:

优点:一提到这个软件,绝对是有话题的软件。谁都没有想到,用3D做图标可以成为主流,而且不得不说的是,用3D做的图标无论质感还是光影实现起来快捷、方便、强大,也许一个小时的设计已经完全超越10个小时的PS。3DU设计师,可以说是他掀起3D做图标的风潮。

缺点:强大在于拟物化设计,界面设计较差,上手较难,毕竟二维和3D还是两个

技能专修

介绍了这么多软件，小伙伴们也应该有所了解，为了更加清晰明确，采用大家更易懂的以满分10分为划分，高低比重为分值

10分：熟练、掌握、专精

9-6分：掌握、熟练

5-3分：掌握

2-0分：了解即可

所以，小伙伴们，无论是怎么样先从Photoshop学起吧，虽然其他软件都有强大之处，，但是需要团队配合，在未来我们掌握了这些技能，那么再可以研究其他工具，提升自己。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

如何开始学UI？入学UI的五大问题！

UI设计七紧 2018-06-26 16:43:55

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1.我想学UI，请问看什么书啊？

2.我想学UI，请问哪个培训机构比较好？

3.我想学UI，请问如何入手？

4.我不是设计专业，但是我还是想学UI，请问如何系统学习？

5.我不管，我就是要学UI，请您给点儿建议。

.........

上述的问题，我一天能收到好几个，那么今天我就详细的写一写如何开始学UI吧。

如果你连这篇文章都看不完，你还告诉我你有恒心学好UI？

关于作者本人，大学时曾经兼职某培训机构PS讲师，对设计培训行业了解一二。自己是非科班出身纯自学无培训经历工作三年的每个月还完信用卡就感觉身体被掏空的普通UI设计师。

好了言归正传：

一、你为什么想要学UI？

用户界面（User Interface）是指一切可供用户和系统进行交互操作的介质的综合。

在当下这个时间点，一提到UI，大家其实会不由自主的指向移动端app设计而忽略UI的其他形式。网页、手机 app、pad app、车载系统，智能冰箱的控制窗口、智能电视的操作系统界面等等等等，其实都是UI的范畴。

各位现在励志想学UI的同学们，不妨扪心自问一下，你为什么想学UI？

我综合分析了几个周围朋友和私信我的同学的真实案例，答案无非只有以下几种：

1.UI设计工资相对较高。

2.UI设计入门相对容易。

3.自我感觉UI设计还挺有趣的。

郭德纲有个段子说得好，一个人卖盆，结果卖了两个月发现不挣钱，然后就去卖猪肉了，从此以后再也没有卖过盆，这是正常人的择优手段。但是还有一个人卖盆，结果卖了两个月发现不挣钱，于是就去卖肉了，然后用业余时间继续卖盆，那这个人是真的喜欢卖盆，他对卖盆这个事情有着天然的兴趣。

这样吧不然，为了检验你是不是真的喜欢设计，我这里先推荐诺曼的那四本《设计心理学》，这是相对来说不那么枯燥乏味的设计方面专业书了，算是一种科普性质的，什么行业看了都没错。你先去啃下来，如果中途没有打瞌睡并且能够看个大致明白并且觉得还挺有意思的，那说明你可以具备一定的自驱力，可以去开始着手学UI。

自驱力是最重要的一点，为什么今年有一些三年工作经验以上的UI一下子就被淘汰了找不到工作？因为一个人的价值是和你的不可替代性成正比的，自驱力来源于兴趣，本身不是喜欢这个行业的设计不求上进两三年拿不出与工作经验相衬的作品，势必要被淘汰。

二、UI设计师挣得多么？

每个行业都有挣得很多的顶尖人才，还是那句话，一个人的价值是和你的不可替代性成正比的，但是普遍来说中国的互联网行业薪资构成一定是产品≈技术>设计的，但是相对来说技术的行业门槛比较高，产品暂时抛开不论（手动微笑），而且在绝大多数非技术岗位互联网从业者的心目中设计这件事情是一个纯主观的事情，很多人甚至到今天还在说哎呀XXX今天更新好丑，他们公司的UI简直就是一坨屎这样的言论背景下，在前几年UI培训确实是如火如荼的进行。

UI设计师到底挣得多么？答案是：“收入可观”。

从腾讯CDC《2016用户体验行业调查报告》中能够可以看出：

调查结果显示：

用户体验行业从业者税前薪资年收入主要在 5 ~ 15 万；

管理类薪资较高,集中在 10 ~ 25 万；

视觉设计、 交互设计、品牌设计的薪资相对较低，偏向 5-10 万；

用户研究，产品类的薪资居中，倾向于 10-15w。 

从图上可以得知，如果是一个下定决心打算进入UI设计/视觉设计行业的萌新，那请你做好一开始“不到5W一年”和“不到10W一年”的准备。

结论：从数据上来说，培训出来月薪过万这样的例子我承认一定有，但是不多。更多的设计科班出身或者培训行业出身的设计在工作的第一年，工资都不太喜人（一线大城市可能会相对稍微欢喜一些）。

结合上面那个卖盆的段子，不到五万一年，你还想学UI么？（手动微笑+1）

三、学UI，应该选择培训机构么？

我的答案是分两头看，如果你是设计科班出身，并且对互联网UI/视觉设计师的职责有清晰的认知，了解工作流程，那么我的回答是不需要。但如果你是一个学法律的学中文的，对互联网公司和设计本身一窍不通的想学UI有志好青年，并且周围几乎没有互联网从业者圈子，那么，我的回答是需要的。

因为你要明白，市面上绝大多数培训机构能够给予你的是：

0.了解互联网大环境和app产品UI/视觉设计师的作用及工作流程。

1.一到多项工具的使用。（一般是Photoshop、AI、Sketch、Axure等等）

2.一到多次虚拟互联网项目经验。（包括从但不限定为从无到有、模拟迭代等）

至于推荐就业之类的，你爱信信，反正我不信。

我大二的时候因为PS技术比较好，所以兼职在某培训机构教PS，先后带过三个班，一个是摄影后期那个就不说了，其余两个都是UI的基础班，只不过一个侧重移动端app，一个侧重网页设计而已（12年那时候还没sketch）。

我可以拍着胸脯保证我教授的PS知识能够完成市面上所有的app和网页设计，这个按钮是怎么实现的，渐变怎么拉，字行距间距怎么设置，布尔运算怎么操作这些你从我这里一学就会，包学包会，然而这并没有什么卵用。这就好比一个你去学习素描，老师告诉你铅笔分为几种，每一种黑度不一样，你手要怎么拿铅笔，排线要怎么练，面是由线构成的，好了，你画吧。你能画的出来才怪。

很多想入行UI的小白最大的误区在于：我只要PS/sketch用得好，我就是个设计师了。

拜托你们醒醒好吧，你要明白PS也好sketch只是一款工具而已，它本质上和屠夫手里的刀，猎人手里的弓箭，雕塑家手里的钉锤没有任何区别。我现在把罗丹的工具从博物馆偷出来给你再给你一块质地几乎一样的石头，你敲一个思想者出来我看看？

四、Sketch和PS必须熟练掌握一款

好了书归正传，虽然学会软件并不等于可以胜任UI设计的工作，但是学会一门软件是很基础的入门级的事情，市面上能用于UI设计的工具现在几乎淘汰到了只剩三款，PS/Ai/sketch，而其中Ai由于是基于对象的矢量绘制软件，在位图设计当中有着天然的劣势（当然也有很多人用，但是我个人是直接排除的，才不会告诉你我还见过firework流的UI呢）。

在Ps和sketch中，目前在UI设计工作中，我基本上完全会用sketch，Sketch实现不了的功能，偶尔会用PS辅助一下，Sketch实现不了什么功能呢，比如你现在想做一个弥散阴影（自行百度），sketch就实现不了，十分想吐槽sketch没有类似于PS图层“图层样式”的功能，不然基本上做UI就可以完全不打开PS了。

目前我的观点是Sketch可以作为UI设计主打软件，适合新手使用，入门简单，学习成本极低，插件丰富，功能足够强大，唯一美中不足就是只支持苹果系统，但是我认为如果你是决心入行的话，rmbp还是买一个吧。Sketch/PS的教程视频网上一搜一大把，这里我就不赘述了。学习一款软件，最重要的是持之以恒，一两个月绝对可以掌握，这部分外功没啥好说的。

五、UI设计师的自我提升

好，从下文开始，我假设你已经是一个经过三个月努力，熟练掌握设计工具的萌新了。那这时候你该如何修炼自己的内功呢？

UI设计师的自我提升step 1：看（Look）

“看是一个浸淫的过程，也是提高审美和观察力的过程。”我从大二开始，给自己的任务是每天睡前看一小时：

• https://www.ui.cn/ - UI中国
• https://www.zcool.com.cn/ - 站酷
• https://www.pinterest.com/ - Pinterest是我这几年素材收集用得最多的一个网站

那，到底看什么呢？

作为新手来说，第一步应该关心的是：这张设计稿有没有什么技术难点是我实现不了的。

我举个例子：（以下举例图片全部来自Pinterest - my board）

比如晚上睡觉的时候，无聊翻Pinterest，然后看到这张图，作为新手来说，心路历程大概应该是类似这样的：

知道一张设计稿里面每个元素是怎么绘制的，这是最初级的阶段。

其次看什么呢？尝试每看一张图的时候不要像刷朋友圈一样一晃而过，看的时候强行试着分析一下这张图的优点和缺点，同样举个例子：

比如这个UI界面，作为一个新手，自己尝试分析一下这个页面的优缺点，比如：

优点：

1.这个页面给人一种性冷淡风干净清爽的感觉（然后你去baidu/google"性冷淡风",得到关键词“Normcore”，然后再继续dig deep，去详细了解这种设计风格。）

2.信息展现清楚，交互按钮Add和Message也是清晰直接

3.图一上面，用了一些渐变小纹理特别赞。

4.这种斜着切一刀带来的设计形式感特别赞，要学~~~

缺点：

1.这个界面偏概念，隐藏了navigation bar和Status bar，在一般工作中这样设计需要谨慎

2.虽然美观，页面展现信息较少，在工作中一定是不适用了。比如图一，一屏信息只展现了人名+人简介+Add和Message按钮以及下面两个人物列表。图二更屌，只显示了这个人的这么一点信息，换句话说，这个页面所有呈现的信息约等于微博四分之一页面信息，除非这个app功能特别少，只强调美感，不然应该不太会这么设计：

分析是UI设计的基本功，不管是浏览设计网站看设计作品还是日常使用app和电脑浏览网站，都可以抱着这种分析设计的心态。如果你能根据你的设计分析写一个学习笔记什么的，相信我你会进步得更快。

再然后看什么？尝试找出这张图第一时间吸引你眼球的元素。

如上图的例子，那种斜着切一刀的感觉是不是显得特别利落？

比如这两张图：

同样是方形构图元素，第一张吸引我的是一种“品质感”，第二张吸引我的是颜色。

包括第一张MARKET IT下面一条线的形式感设计和第二张最下面鞋上的VANS AQUA SHOES的形式感设计，都是可以学习和借鉴的。

总之，“看”是设计师每天都应该做的事情，长期坚持多看多分析有助于设计感的培养，在熟练掌握软件的前提下，眼高手就不会低。

UI设计师的自我提升step 2：临摹（Copy）

提到copy，大家可能会想到那句俗话说 Good designers copy. Great designers steal.

有的人说临摹不就是抄么？咳咳，咱们读书人的事情能叫抄么？叫借鉴。。

其实不太对，大家想这样一句话，我说让你抄同桌的作业和临摹同桌的作业，区别在哪儿？

临摹的意思是，尽自己所能，做到每一个像素分毫不差。

我给大家举个例子，左面这张我自己作品里的一张图，之前还没有Sketch的时候用PS做的，后来学习Sketch的时候我又用Sketch临摹了一遍，放在右边：

其实仔细看是能看出区别的啦，但是临摹，起码要做到这种效果，每当你去临摹一张设计稿的时候，可能要花大量时间，但是收获巨大。

因为首先临摹第一步是需要测量，测量和临摹一个UI作品给我的帮助太大了，强烈建议每一位新手好好的，临摹一两款市面上很火的app，不管是什么，只要是你觉得界面还可以用着够方便，微信微博也好，美团网易云音乐也好什么都好，找一款app尝试测量和临摹，你会看到很多更深层次很有趣的东西。甚至可以了解这个产品UI当时的心路历程，总之临摹这件事你试试就知道了这方面我就不展开了，以后有机会另起一文。

总之，不断临摹优秀作品是我认为UI设计新手成长最捷径的办法（我认为没有之一），因为很多时候光看是不够的，有些时候你自认为很好实现的效果，到你手上实际去做的时候会发现根本就不是这样的，不信的话，下面这九个图标，你们可以选一两个去临摹一下试试：

临摹，是将“别人的”转化为“自己的”最优秀的办法。第一步先做到尽量一模一样，然后再去求变和思辨，往这个方向努力一段时间，回过头，你会发现自己的进步，除此之外，你还会发现，咦这些个app这种设计形式我都曾经见过。。。

UI设计师的自我修养step 3： 尝试分析 （Attempt to analysis）

尝试分析一款app，基本上是从app的信息架构入手的，这是一个UI偏UE和产品的工作，但是对UI设计师来说挺重要的，app的信息架构怎么做，说白了就是花时间把整个app点一遍，然后分析app的信息层级，一般我用Xmaind7去做信息架构图，比如我是一个dota2玩家，所以我曾经做过max+的产品架构，放在下面给大家看：

做信息架构的时候不光光是点完记录下来就结束了，要带着自己的想法去做，比如我图上标绿色的地方是这个app的重点功能模块，黄色的小问号是我初次做信息架构觉得信息展现有问题的地方。

做信息架构能给我们带来什么？

第一，能够让UI设计师迅速了解一款产品。如果说你刚入职一个新公司，那不妨入职第一天先从你公司信息架构入手~

第二，能够让UI设计师在横向对比两款或者多款产品交互的时候提供必要依据。这点不展开了，推荐大家上手做网易云音乐和QQ音乐的信息架构，做了你就知道我在说什么。

第三：方便UI设计师了解行业产品形态。比如你之前是一个旅行类app的UI设计师，现在你即将跳槽去一个互联网金融p2p的创业型新公司，如何入手设计一款新的p2p类app呢？你只需要选择市面上最火的两三款p2p类app做一下信息架构，你就会明白一个大致的方向，因为行业里大家都是这么做的，你就把好的地方继承，不好的地方创新就是了。（心里话：说起来容易，做起来可完全不是这么一回事啊喂！Orz...)

第四：方便设计师做redesign。很多UI设计师都喜欢做作品集，那自己没这么多线上作品怎么办？于是就做redesign，站酷上UI中国上到处都是各种产品的redesign，有一些做得确实很好，在分析一款产品的信息架构之后其实是很容易找出产品一些易用性问题的，那针对这样的易用性问题进行优化的redesign思维一定是有益的。

我在这里提供第二种制作信息架构的方法，这种方法更偏交互，我把他称之为点击类信息架构：

具体这是一张特别大的图，我就不给大家展示全了，这里我着重想说的是这是另一种偏交互类的信息架构方法，图上那个S0，S1，S2是我自己编的词，S1代表的是一次点击就可以达到的页面，S2表示的是两次点击可以达到的页面，S3表示三次点击可以达到的页面，然后我把S1，S2，S3对齐排列，这样就可以知道这个app的每个功能深度（深度的意思是指你需要通过几次点击才能达到，点击次数越多当然就越深）。

比如分析的时候看到一个特别重要的功能被埋藏得比较深，那就说明这个app是有问题的，下次改版时候从UI方面着手看看能不能把他提前之类的。这当然是产品做的工作，但是UI设计师掌握这个没啥不好。

UI设计师的自我修养step 4：回顾与总结（Review and summary）

看完一本书，听完一个故事，一个项目结束之后，一个版本迭代完成之后，一份工作离职之后，都是需要总结的。总结开发中出现的问题。比如开发和设计稿不一致，是不是设计这边造成的，如果是，那我是怎么造成的，如果不是，那我有没有挽回的余地。总结设计中出现的问题，这些地方是不是还有优化的空间。总结沟通中出现的问题，是不是不该骂产品骂的这么狠。（我承认，我经常和产品撕得天昏地暗2333333 Orz...）

总之，总结是特别重要的一点，尤其是看完一本书之后的总结和踩到坑之后的总结，多和开发成为朋友，他们会教会你很多。（不然我特么作为一个设计怎么知道滑动切换瞬间navigationbar不能变色。。。）

好了感谢大家看到这里，再见~

希望大家一起进步~

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一看就懂！详解大厂UI设计规范制作步骤

小小设计控 2018-07-30 09:34:38

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一、提取设计原则关键词

1. 提取一级关键词

第一步，先要去提取出关键词，这个关键词怎么来，有几种方式获取，第一个从整个公司战略出发，任何一个产品一定有他的战略，品牌战略，商业战略。举个例子，假设我们是 eaby，公司今年战略是全球化，高品质，正品，那么这个就是一级核心关键词，所有的设计语言一定要和公司战略结合起来，可以理解为战略关键词是整个设计语言顶部金字塔。

二、运用情绪版提取二级关键词

有了一级关键词后，需要去思考，那么什么样的设计能给人全球化的感受呢，什么样的感觉能有高品质，正品应该传递什么样的感觉呢？此刻需要用到第二个方法就是情绪版，通过情绪版去把符合这些关键词感受的图形具体化。

三、高品质特征是什么？

下图是一组日本的花茶设计，那么在这组设计中，设计师是如何体现高品质呢？

△ 首先包装很精美耐看，设计简约

△ 做工精量，整个产品包装，都是在富士山脚下

△ 采摘环境很透明，值得被信任

△ 整个品茶的过程也特别让人向往，很有仪式感

△ 整个的设计很完整，很有设计感在里面

通过以上案例拆解，我们能对这个高品质的关键词有更加进一步的理解，高品质原来在情感层面是一个这么抽象的感觉，但是很多同学会问，那么这二级词汇也很抽象，如何靠这个来做设计，很难去理解及表达，别着急，还有下一步。

1. 高品质设计表现形式？

关于高品质在视觉形式上如何来体现了，哪些设计感觉能代表高品质呢，这个时候就需要我们去寻找一些设计参考，这些案例要能代表高品质。

△ 清晰的有品质的图片

△ 牛皮癣，不精致不可取

△ 优雅的排版和留白，文字清晰，杂志感受

△ 图文密集，缺少版式不可取

△ 精致的布局，栅格的体系，给人品质感

△ 缺乏版式及设计感

△ 有设计细节的

△ 无细节不可取

△ 合理的配色，简单清晰

△ 山寨的配色不可取

△ 设计的延续性和完整性

2. GOOD CASE

3. BAD CASE

四、设计分层

以上就是我们从一个战略关键词逐步推导到一级关键词，到二级关键词，到设计手法，以及对应设计表达，推导的一个全过程。

• 本能层：清晰的，有设计感的，做工精致
• 行为层：完善的，值得信任的，用心的
• 精神层：让人向往的，值得期待的

五、总结

以上大概为一个设计关键词的全部推导过程及到设计手法的确定，也是设计语言里面最难的部分，后面的关键词也是类似的思考方法和思路，最终通过推导我们需要得出每个关键词的情绪图，以及对应设计特征，最终需要在界面中展示的形色字构质，一个完整过程。

比如国际化，同样通过前面思路，我们需要去思考国际化如何在设计中体现，去提炼出代表国际化的象征物，如地标，国旗，邮戳，货币等等，包括如何在界面中融于国际化元素，以及人物和节日场景。

结语

希望大家可以通过我这期的分享，能够详细理解到如何从公司战略层提取到核心一级关键词，到二级关键词，以及对应的设计手法，对应到形色字构质，大家可以依据此方法去拿你现在手上的界面去做一次体系化的推导。

最后，依据推导出来的原则，以及对应的设计手法去做概念，去在界面中运用，最终完成设计语言第一步，设计关键词和设计手法定义。

图片素材作者：Tran Mau Tri Tam ✪

你为什么觉得交互设计难？

原创 康石石 2018-07-30 10:14:24

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

交互设计作为国内当下艺术留学中的一个新兴专业，申请人数逐年增加，甚至已有赶超服装设计、建筑设计这些热门留学专业的趋势。但在专业认知上，申请交互设计的同学却不及其他两个专业。这也使得很多交互学生在专业学习上要比其他人耗费更多时间，很难快速上手进行交互项目的创作。

但这丝毫不能推责于各位同学身上，因为国内基本没有正儿八经的交互设计专业，即便是有，多数也在工业设计与多媒体设计之间存有剪不断理还乱的关系，这使得很多同学对交互设计的认知较为单一，项目创作除了APP设计就是APP设计。但其实交互设计“入门”这件事，找对了方向，往往事半功倍。

今天的文章，康石石将为处于交互“入门”阶段的同学详细梳理两个问题：

1. 交互设计是什么？

2. 入门交互作品集需要从哪些方向入手？

希望大家在通读文章之后，能够尽快跨过“入门”这道门槛，以更稳定专业的心态进入作品集创作。

一、交互设计是什么？

---

各个百科上对交互设计都有非常明确的定义，但对于没有专业基础的同学们来说，这些定义还是略显弯弯绕绕，康石石简单解释一下：交互设计，其实就像人与人之间的日常交流一样，人与系统之间也是“有问有答”，具有互动性的，而交互设计就是协调人与系统之间的“交流”方式。凡是可以通过五感来达成的信息传递、观念传递、情感传递的互动行为都在“交流”的范围之内。

从具体表现形式上来说，包括但不限于手机APP、传统网站、可穿戴设备以及新兴的VR，各种与非电子类产品的交互关系也属于交互设计的范围。

这样一讲，交互设计的范围似乎太过宽泛，但其实简单来说，交互设计大致可以分为三个基础模块：

1. 美学——用户界面设计（User Interface Design）

2. 心理学——用户体验设计（User Experience Design）

3. 计算机&工程学——人机交互设计（Human-Computer Interaction）

在这里我们先说UI设计（用户界面设计），大多人似乎都知道UI设计是什么。但其实，UI放在交互系统内，比如众所周知的app、网站，它可以成为交互设计展现的一种媒介，是交互设计中一个难以或缺的组成部分。严格来说，UI设计并不属于交互设计，它实则应该归类于Graphic Design--平面设计。

而HCI（人机交互设计），与VR、AR，以及大数据等次时代的前沿科技相关，未来发展前景光明。但需要强调的是，HCI绝大部分学校是按理工科教授，因为它主要研究的是人机如何交互，而不是人机为什么交互，为谁交互，以及交互究竟有何意义。简言之，就是HCI研究人机交互的技术，更简言之，多数是在搞程序、编代码。

最后，重点说一下涉及到心理学的UX设计（用户体验设计）。在交互作品集的创作中，UX是尤为关键和重要的，主要原因在于，相较国内对于学术研究和视觉审美的培养，国外院校更看重的是设计出来的物品是否真正解决了用户的需求。

这一点就要求了设计者必须换位思考，设身处地的站在用户的角度上去考虑设计的每一步。这也应证了交互设计的本质——交互设计师设计出来的是用户想要的东西，而不是设计师要做用户想要的东西。

二、入门交互作品集需要从哪些方向入手？

---

一般情况下，对于完全零基础的同学，康石石东家-汉艺国际在其进行作品集创作前通常会先安排2-3周的基础专项课，一系列课程下来，基本就能掌握作品集创作所需的所有知识及能力。这些课程康石石无法在这一篇文章中表述完全，仅为还处于入门阶段的同学就两方面内容作简要解析：

1. 交互项目

这一点是大多同学都非常关心的问题，以下康石石列举五种最常见的交互项目，若有些同学已经具备较为完善的交互专业知识与能力，可以尝试更为高阶的项目：

1）APP、网页

交互设计作品集中，最容易上手的就是单一化的APP或网页项目，几乎每一个同学都会涉及到。而且APP与网页项目的制作过程与方法相似程度高达90%，同学们在创作项目初期可以先尝试这类项目练手，尽快熟悉作品集的创作流程。

Y同学，17届学生，获卡内基梅隆offer

2）复合APP制作

比上述提到的APP和网页稍复杂的是复合APP，比如产品+APP、传感+APP、装置+APP、手表+APP 、网页+APP等等，简单说，不仅仅是以APP为载体类型的应用都可以称之为复合App。主要也是为了解决形式单一化，以及丰富项目内容创造更多设计点。如果思考维度多元化，专业领域深入探究，也可以发展为一个服务设计项目。

3）交互装置制作

交互装置在交互作品集中属于拔高项目，因为技术方面涉及到了电子化编程和电路板连接传感器等内容，呈现效果体现了交互意识、审美意识以及代码意识。内容方面，交互装置更多是从产品原型开发去研究。由于涉及到代码问题，在创作这类项目之前，专业技能及代码知识都需要系统的了解。

H同学，15届学员，获伦敦传媒学院、爱丁堡大学、拉夫堡大学offer

4）游戏制作（普通→AR→VR）

在交互游戏制作过程当中，很多同学会遇到不知道制作流程，不明晰VR和AR是什么概念，或许也会困惑为何我们把AR、VR列入游戏制作等种种问题。事实上，VR、AR也都需要通过游戏引擎搭建，所以从本质上来看，它们都是游戏。

L同学，17届学员，获伦传offer

2. 创作交互作品集需要具备的“基础能力”

对于申请名校而言，同学们在基础专业知识、作品集创作流程之外，还要具备四种基础能力：基本审美能力、思考和解决问题的能力、创意、以及个人风格。

1）基本审美能力

对于设计师而言，良好的审美能力是必备的创作基础。一般情况下，院校的考官大多会通过项目中各种低保真、高保真的UI原型设计，以及整体作品集的排版等视觉元素来判定，包括排版中每个图标的位置、统计字体大小的一致性、整个项目风格的统一性等等。

2）思考和解决问题的能力

设计过程中，设计者的思维方式、逻辑关系是否清晰、有条理，是否通过设计过程解决了前期提出的问题，这些才是海外艺术设计院校的老师们最关注的关键性问题。

需要和同学们强调的是，想要创作一本优秀的作品集，最基础的要求是熟知其创作流程，这是考官的考察点，但仅凭这些自然不够。

无论是前期调研还是后期做原型做测试，正规作品集的流程通常都是一样的。因此，考官在判定申请者个人思考和解决问题能力的高低时取决于不同人在思考过程中每一步的逻辑所在。根据什么现象发现什么问题，根据什么问题设计什么功能，如何通过思考一步步得到解决方案，这些都值得同学们在创作中进行多维度的思考与试验。

3）创意

不拘泥于APP类型的交互设计。一个交互作品集通常需要5个项目，同学们在APP设计之外，必然需要通过更多创新型项目，用以体现自己对专业能力的把控以及创意思维的体现。比如目前还属于创新型拔高项目的VR和AR，尤其是在如今众多艺术作品集表现形式都略显中规中矩的情况下，一个优秀的VR或AR项目会帮助作品集脱颖而出，为整个作品集增加亮点。

比如汉艺16届学员T同学的作品集项目中，将水下AR系统与导航系统相结合，让两种不同的交互题材领域相互融合，展现了自己多维度的创作能力。

T同学，汉艺16届学员，获金史密斯，威斯敏特大学offer

4）个人风格

在交互作品集中，个人风格的体现，几乎可以算得上能够最快让自己的作品集脱颖而出的有效方式之一。这里说的个人风格并不是指每个人所做的作品集项目的风格，而是你作为设计者，作品集中所包含的个人设计理念和思考风格。

以汉艺16届学员D同学的CUI项目DANA为例，项目主要为已刑满释放重获自由的前犯人们提供重返社会工作的各种服务。首先，可以看出项目题材切入点较为新颖，充分展现了D同学在生活中善于观察的独到之处，此外，D同学还细心的为DANA设计了虚拟形象，细节部分可见一斑，充分体现了设计者的与众不同和强烈的个人风格。

D同学，16届学员，获CCA、SVA、Parsons Offer

Final: 以上对交互作品集入门阶段的知识要点为同学们做了简要整理，大家需要明确的是，交互设计虽是一个新兴专业，很多人对其认知也确实不够全面，但从零基础到能够创作一个完整的交互项目之间并非难以跨越，甚至只要合理安排好时间，有明确的学习规划，便能很快进入创作期。

最后，上述只是入门交互设计的基础知识，若想要支撑自己创作出更具竞争力的交互作品集，必然需要同学们在交互设计领域中继续学习和探索。康石石与东家汉艺也在一直尝试通过各种课程帮助大家探索更多交互的可能性，这不仅是为了作品集创作，更多的是希望各位在专业能力以及创作思维上都能有更高质的提升。

---

艺术留学&艺术作品集咨询：

汉艺国际教育--康石石作品集指导团队

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

优秀UI界面设计评析

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

网页设计的核心难点是什么？

公众号:西见 个人QQ:26474600

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

 网页设计也被称为Web Design、网站设计、Website design、WUI等。它的本质就是网站的图形界面设计。虽然现在我们常使用移动端上的APP来获取资讯，但是显然基于个人电脑平台的网站上网方式陪伴我们的历史要比手机久很多：从1987年钱天白教授向德国发出第一封电子邮件到2000年搜狐、新浪、网易在美国纳斯达克挂牌上市，再到现在网站遍地；中国的网站高速发展了近三十年。我是在小学开始去网吧“上网冲浪”的，那时的电脑屏幕非常小，分辨率只有800x600像素（对比一下，iPhone8的分辨率是750x1334px），网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、富媒体等设计让如今的网站体验并不比软件和手机APP差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。那么作为UI设计师我们就必须掌握网站设计的规范和理解网站运行的原理，才能更好地驾驭这个平台。今天就向您好好说道一下网站必须懂得的那些事儿。

工作流程

首先让我们来看一下网站设计的工作流程吧：除了之前介绍过的用户研究、撰写产品需求文档、市场文档、做竞品调研等工作之外，与设计师密切相关的网站项目流程可以分为原型图阶段、视觉稿阶段、设计规范阶段、切图阶段、前端代码阶段、项目走查阶段六个阶段。每个阶段都需要设计师参与和了解，千万不要只在意视觉稿这个阶段，有很多前期与后期工作同样需要得到我们的重视。好，让我们一个一个来了解它们吧。

原型图阶段

原型图阶段中设计师需要和产品经理沟通需求，这时要注意，并不是产品经理向设计师下发需求，而是需要相互就自己擅长的方面进行沟通。视觉方面具体呈现也许设计师会有更好的方式，这时需要在设计之前与产品经理达成一致。

构建网站原型图（工具：Axure RP ）

视觉稿阶段

视觉稿阶段就是我们要根据原型图确定的内容和大体版式完成网站的界面设计了，在设计网站的时候，我们需要一些图像和灵感的素材。比如做世界杯专题时，我们除了收集很多素材之外，也可以设计一个“情绪板”（Mood Board）。简单说情绪板就是将一些与主题相关的资料和素材拼贴在一起，这样可以更好地指引我们整个需求的设计主题和大体感觉。另外，很多网站的头部通常需要主视觉来抓人眼球，这时可能会使用到需求方提供的明星照片、主题素材、LOGO、主视觉PSD等，那么用素材和这些需求方提供的资料进行混合并拼出让人觉得震撼的头部视觉就是我们的目标了。主视觉下面的信息排布更强调合理性，这时也需要和产品经理沟通从后台调取的图片尺寸、标题字段长度等，然后根据这些要求完成页面信息部分的设计。总之，设计过程中需要我们不断思考和沟通才可以完成一个比较棒的视觉稿。

视觉稿设计阶段（工具：Photoshop）

设计规范

当视觉稿通过后，很多设计师可能不会主动去做设计规范。其实每一个可迭代的产品都需要设计师来总结设计规范，设计规范就是所有页面中共性的东西，比如说字体不同的大小、图片的尺寸、按钮的样式等，这些共性也是用户访问网站时会理解成固定概念的凭证。比如同样的分享功能如果采用两种截然不同的样式就会让用户困惑。那么设计规范主要也是在约束设计师我们自己，在用户有限的记忆力中减少思考的成本。同时，设计规范也可以保证同一个项目的不同设计师都能输出一样风格的设计来。最后，设计规范对于设计师个人来说也是对项目影响的一个佐证，可以证明你的思考和你在项目中的地位。所以我认为设计师应该主动去做设计规范和项目总结。设计规范如何去做？其实设计规范就是把主要页面的元素固定成统一元素即可。具体来说一个产品的设计规范应该有：字体规范、主体色规范、图表规范、图片规范等不同分类。

视觉规范（工具：Photoshop）

切图

网页设计师通常不需要为前端工程师切图。因为前端工程师通常需要掌握PS软件技能。如果遇到特殊情况需要我们切图时，我们可以使用诸如Cutterman、Zeplin等切图插件中的Web选项为前端切出网站所使用的图片。

从PSD中提取出来的切图（插件：cutterman）

前端代码

前端工程师会用代码重构我们设计的页面，把图纸变为静态页面。然后和后端工程师对接调取数据接口，一个网站就活了起来。工程师们为了方便了解网站是不是达到了我们要求的数据，也会进行埋点。埋点就是在页面代码里插入一些统计代码，方便我们之后确定哪些页面访问量高，哪些没有达到预期。在此后其实还会有测试工程师介入来发现编译完的网站是否存在一些漏洞等，这里省略。

前端工程师代码编译（工具：Notepad +）

项目走查

网页设计完成后还需要设计师进行项目走查，来确定网页还原度是否有问题。如果发现有和设计稿出入很大的，就需要要求前端工程师进行调整。这个步骤非常重要，因为网站的成品才是我们最终的输出，不要认为设计稿很漂亮而实现后的页面就不需要我们负责了。

将实现后的截图和设计稿进行比对（工具：Photoshop）

网站种类

网站的分类按对象来划分可以分为To C端和To B端两种。To C端就是面向用户和消费者，例如门户网站、企业网站、产品网站、电商网站、游戏网站、专题页面、视频网站、移动端H5等，均是面向用户和消费者的产品。由于是面向用户和消费者，所以设计上一定要可以吸引人，并且以用户为中心考虑体验设计。而To B端作为一个需求量很大的类别，其实往往被设计师所忽视。什么是To B端项目呢？比如电商网站供货商的后台、Dashboard、企业级OA、网站统计后台等这些面向商家和专业人士的网站就是To B类网站项目了。这些项目的要求和To C端网站的要求大相径庭：To B类项目最重要的是效率而不是体验，因为说白了我们在设计使用者工作的工具，我们在设计时必须首先要保证操作者可以地完成他们所需要完成的工作。那么让我们来了解一下网站的不同门类吧。

门户网站

门户网站国内比较知名的有新浪、腾讯、网易、搜狐；国外比较知名的如Naver、Llinternaute等。我们可以看得出，门户网站都是大而全包罗生活万象的。比如腾讯网就有新闻、财经、视频、体育、娱乐、时尚、汽车、房产、科技、游戏等不同频道。门户网站的门槛很高，必须要有雄厚的实力才可以建立起一个门户网站，而门户网站需要的设计师数量也惊人。首先门户网站需要产品方向的界面设计师以迭代的方式维护迭代网站首页、二级页面、底层页等网站基石。然后需要各个频道的设计师来处理日常需求：比如巴黎时装周需要负责时尚频道的设计师来设计对应的专题、世界杯小组出线需要负责体育频道的设计师来设计对应的专题等。地球上的每一天都有大事发生，那么门户网站中的设计工作就不会少。另外，具体对接频道的设计师也需要有一定擅长之处：比如对接体育频道的设计师起码应该熟悉足球篮球等体育项目、时尚频道的设计师要懂得各个大牌的设计风格、佛学频道的设计师需要懂得基本的佛学知识和忌讳、文化频道的设计师需要对传统文化有所涉猎。所以基本上门户网站的设计师可以分为产品组和频道组两种。

韩国门户网站Naver

企业网站

每个企业都需要有一个网站来对外展示自己的能力、介绍自己的产品等。现在接触一个陌生的企业时，很多老百姓都会上网搜索一下其官方网站验证真伪。网站已经是中小企业的标配了。企业网站设计时通常会有网站首页、公司介绍、产品中心、公司团队、在线商城、联系我们等这几个模块，企业网站会展示很多诸如公司环境、团队成员、企业文化等实际的照片，配合一些资料进行设计。企业网站通常也追求所谓“高端”、“大气”、“上档次”的风格，也就是为了达到让消费者认同品牌这个要求。所以如果我们接到了企业网站的设计需求，不妨多去浏览参考一些更加大牌的企业网站作为竞品来参考。

美国通用公司官网

产品网站

从苹果公司的iPhone介绍页到小米手机8的介绍页，我们会发现一种新鲜的产品营销模式，就是产品网站。设计这类网站的内容主要是该产品的工艺、技术、设计、特点、构造、使用场景等。这样的产品页希望可以让用户有沉浸感，所以一般来说都是使用全屏布局，然后配合一些如视差滚动等方式让我们感觉到这个产品的精细。由于中国互联网和产品设计发展很快，所以产品类网站设计需求一定会越来越多。

苹果公司产品介绍页

电商网站

电商设计师也属于网页设计师吗？是的。如果按照平台细分，无疑电商设计师所在的平台大部分属于网站。以淘宝、天猫为代表的电子商务发展得太快了，以至于从内蒙的牧民到海南岛的渔民，甚至台湾、日本、东南亚的商人都开始在中国电商平台上开店铺了。店铺其实本身属于平台本身的页面。但是为了增强每个店的个性，平台为商店开通了一些页面自定义的装饰功能，比如宝贝详情、店铺排版、banner头图设计等。这样商铺有一定权限在平台规定的范围内使用图片和一部分css样式代码来装饰自己的店铺，电商设计应运而生。虽然带着镣铐跳舞，但是有很多店铺因为设计精良而能带动销售。那么电商设计师当然就变得非常重要了。

淘宝网首页

游戏网站

游戏是一个巨大的产业，很多公司的收入大半壁江山都来自游戏产业。那么除了游戏需要制作精良之外，游戏的官网也必须设计精美。不要忘记，每一个玩家都需要访问你的游戏官网才能完成下载、充值、社交等重要操作。国外游戏网站比如暴雪娱乐公司（https://www.blizzard.com）的官网设计得极其精美，每个游戏的官网都是一个精品。比如魔兽世界、星际争霸2等游戏官网，头部都是视觉冲击非常强烈的动画。然后网站界面的元素都带有游戏的风格，仿佛登录这个网站你就在游戏之中了。

暴雪公司星际争霸2游戏官网

专题页面

当然不管是电商还是门户网站，在节日都会需要设计师来设计一些专题页面增加曝光。比如儿童节、情人节、母亲节、圣诞节等节日往往会有促销、专题报道等各式活动。专题设计生命周期很短，上线后基本过了流量的那个点就基本没用了。所以我们找不到前几年的618或者双11专题页面，因为过了特定的时期专题页面就无人问津了。所以在那么短的生命周期怎么抓住人的眼球？当然不能使用现代主义设计那种性冷淡风格，而应该在头部尽量刺激用户，用刺激对比强的色彩、复杂立体的造型、冲击感强的文字吸引用户来看。毕竟每个人可能只会看一次，不能放过这个机会。所以专题设计和产品设计正相反，专题设计必须刺激。

极有家淘宝专题页面

视频网站

视频网站的访问量惊人，并且用户的黏着度更高。很多视频网站除了购买版权之外还有很多UGC内容。多说几句，UGC（User Generated Content）是指用户产生的原创内容，很早之前web1.0时代用户主要是单向浏览网站，web2.0提出的UGC概念就是说用户不仅在浏览也会上传内容。那么视频网站为什么会火呢？首先要感谢带宽的发展。在今年我们国内点击视频就立马可以播放了，而在几年前需要等待几分钟才可以加载够缓存。视频网站的设计主要是要考虑应用场景：视频是用户主要观看的区域，所以视频区域首先要足够大，另外颜色应该以暗色为主，因为亮色会干扰到用户观看视频。然后其他的区域图片比例应都为16:9的视频尺寸，方便后期编辑在后台添加。视频网站的设计师同样也可以分为产品组和运营组两个种类来处理产品方向和运营方向的不同需求。

腾讯视频播放页面

移动端H5

你一定在朋友圈被《穿越未来来看你》、《淘宝造物节》等H5刷过屏吧？平时我们经常被这种好玩儿的H5刷屏。其实H5全称是HTML5，并不是仅仅指移动端，而是网页前端的开发语言，由于约定俗成的概念，我们现在常常把手机中的集合视频、动效、互动的这种营销形式成为H5。其实它的本质是运用网页技术运行在手机浏览器或内置浏览器内的网页。随着技术日新月异的发展，H5显得越来越有传播价值和份量。微信、浏览器等平台级产品在手机端中火爆促进了依靠入口而传播的H5的发展。如果设计出色，你的项目可能会在朋友圈产生病毒传播的效果。

使用前端语言编译的适合手机浏览的H5界面

移动端H5尺寸

设计移动端H5项目的时候，我们一般以用户量较高的iPhone6/7/8的尺寸：750x1334px 为准，然后我们要在顶部预留出微信或者浏览器导航区域。主要内容区域就可以自由设计了。一般H5的操作是上下滑动。字体方面使用苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用SF-UI代替。当然H5可以调用背景音乐、视频、链接等多媒体，让体验更佳。除了让前端小哥哥们开发之外，其实还有一种方式可以无需代码生成简易版的H5，就是通过H5工具生成。目前比较火的H5生成工具有：MAKA、iH5、兔展等，如果我们要自己生成而不是通过前端开发，那么我们设计稿的尺寸需要设置为640x1008PX。这些工具较为简单，注册后将PSD上传即可对每个原件进行动效的设置了。但是如果需要复杂的动效和交互，还是需要前端工程师的配合。

H5项目的尺寸

后台网站

后台网站又叫Dashborad，中文翻译为仪表盘。其含义就是有一大堆数据与统计信息。后台网站是To B类型，那么首先的需求就是能快速地显示给操作者他需要掌握的数据。可是数据非常枯燥，我们可以使用诸如“折线图”、“饼状图”、“曲线图”、“表格”等不同方式来展现这些繁琐的数据，这种图形表达数据的方式也叫做数据可视化。后台网站不需要特别可爱的插图以及卡通形象，最重要的是效率。所以如果您经常处理To C类的需求，接到了To B类的产品需求时一定要注意这一点。后台网站因为需要更大的画面，通常会使用全屏式排版，也就是撑满整个画布。那如果小屏怎么办呢？前端会使用相对布局缩小各个元素，排版的位置也会用百分比来确定。

微信公众号后台

CRM系统

CRM即Customer relationship management，翻译过来是客户管理管理系统。CRM是企业对客户进行信息化管理的一种形式，用互联网技术实现对客户信息进行收集、管理、分析，对企业的销售、服务、售后进行监控。常见的功能有员工日程管理、订单管理、发票管理等。我们在设计这种项目时一定要将信息按所属的逻辑关系分类，加强对比、对齐、重复、亲密性的原则，使操作者在使用的时候感觉到便利。

Admin CRM dashboard by Divan Raj

SaaS

如果我们服务于为企业搭建CRM、ERP或者OA等系统的第三方公司，那么我们可能会老听到SaaS这个词。SaaS是(Software-as-a-Service)，即软件就是服务。其他公司会来提供SaaS服务的公司定制系统，然后服务公司会为客户提供从服务器到设计一体化的服务。这里提到这个词是防止设计师误解它的定义。

企业OA

企业OA，即(Office Automation)，也就是办公自动化系统。在六七十年代就兴起了一场使用电脑来改变传统办公方式的革命。在大型企业时常会面临人员众多、地域广袤、办理公司事宜手续冗长等问题，那么企业OA可以很好地解决这方面的问题。通过企业OA可以完成请假、调休、离职、查询公司规章制度、请示、汇报等工作。这样减少了很多窗口成本和员工的时间成本，增强了公司办事效率。互联网公司更是提供给员工除了企业OA之外的交流功能，比如建立员工BBS和留言板等，在上面大家可以对公司提出建议和意见。企业OA一般出于安全和保密性的原因，很多公司都更加愿意自己开发。设计师在设计此类项目时同样要以操作者的体验和效率为重，让操作者轻易可以找到在当前页面中最重要的功能。

Robo Advisor - Projection, List and Questionnaire by Michal Parulski

网站组成部分

了解了网站的不同类别后，让我们来看看组成一个网站需要哪些部分吧。网站是由不同网页通过超链接连接而成的，而不同网页也是由不同模块组成的。我们设计的是一个像蜘蛛网一样的网络，而不是一张海报。所以我们在设计网站时要格外考虑从用户角度出发看到的网站，而不能孤立地把它想象成一个平面作品。

首页

访问一个网站时第一个我们触及的就是网站首页。首页别名叫作Index或者Default，是索引和目录的意思。在网站发展的前期阶段，网站并不是富媒体，而是类似于一本书一样：首页类似书籍的目录，需要查看哪个子网页就点击链接即可进入。到了现在，网站首页仍然是引导用户进入不同区域的一个“目录”，这个目录除了导航功能外也要露出一部分内容给用户来吸引点击，露出的部分一定要有一个“更多”按钮来指引用户找到二级页面。

首页原型图

二级页面

在逻辑上，首页是一级页面，从首页点击进入的页面均为二级页面。二级页面之后还有三级页面等级别。从点击的概率上来说，自然是越靠前访问量越高，页面层级越深越不容易被用户找到。一般网站有三级页面，就是为了避免用户迷失。为此还会在页面中加入面包屑导航。面包屑导航就是在页面第一屏出现的诸如 首页 > 体育 > NBA频道 这样的超链接结构，方便用户理解自己在那里，并且点击可以回到其他页面。

二级页面原型图

底层页

在网站结构中最后提供用户实质资讯的页面就是底层页。比如，在门户网站首页或二级页面中我们点击感兴趣的标题后，在底层页中才会看到全部的资讯。待用户阅读完底层页的信息后可以顺势在左侧或右侧的侧栏寻找用户可能感兴趣的相关内容；在底侧可以看到网友的评论；底侧也会有分享按钮、赞功能等；如果侧栏用户转化率比较差，最底部还可以再次出现推荐相关资讯的功能。总之，在用户阅读完自己喜欢的资讯后，要继续吸引用户顺势阅读其他的资讯或者回到频道。

底层页原型图

广告

门户类网站如何盈利？广告是变现方法之一。网站的广告一般由负责运营需求的设计师负责，但是也可能由频道设计师、产品侧设计师来完成。在网站中常见到的广告图形式就是banner。banner一般尺寸巨大，在网站之中非常显眼。因此也不一定是外部广告，也有内部活动、推荐资讯等。那么banner图的尺寸有固定吗？答案是没有。Banner的宽度有两种，一种是满屏（1920PX）、一种是基于安全距离的满尺寸（1200px或1000px）。高度要注意了：一般以1920x1080px为基准的用户屏幕，加上浏览器本身与插件和底部工具条等距离，留给网站的一屏高度大概为900px，所以banner不可以做得很高，否则第一屏信息会显示得不够。你可能会说，那就让用户往下拉啊。但是在网站的访问用户之中，第二屏触及到的用户比第一屏会少很多。也就是很多用户可能点击网站后就会跳走或者关闭，那么第一屏的信息真的非常重要了，可谓是寸土寸金。所以我们的banner不应该占据过大的区域。比如站酷网的Banner区域为1380x350px。那么除了首页巨大的banner广告位，网站还有哪些广告形式呢？

对联广告。在门户网站中我们经常会看到网站左右安全区域之外会有连个随屏幕滚动的像“对联”一样的广告，通常banner也会是一个广告内容，并且居中会弹出由HTML5技术或Flash技术制作出来的弹窗广告。这种广告一般组合售卖，也就是说一进网站你就会被全面轰炸，无法不注意到这个广告的存在。这种广告点击进入还有配合的专题页等，可见需要设计师配合的地方非常多。

对联广告形式

信息流广告。信息流广告是埋在信息流中的一种广告形式。这种形式利用了格式塔原理，用户会不自觉地阅读起广告的内容，原因是因为它的形式和其他信息一样。比如朋友圈、知乎、Facebook都采用了信息流广告，信息流广告的效果非常强，但是会牺牲一定的用户体验。信息流广告的尺寸与信息流相同。

知乎APP中信息流中的广告

以上从广告的形式上简单介绍了三种常见的网站广告形式，如果我们在阅读需求时看到了cpm、pv等单词是什么意思呢？他们是广告的收费模式。cpm是指按照广告pv来收费，cps是指按照用户消费收费，cpa是指按照用户注册数收费，cpc是指按照用户点击付费。针对不同的收费模式，在设计时也会采取不同策略来增强广告需要达到的目的。

Footer

在网站具体的页面设计中，底部会有一个区域我们称之为footer。一般footer的颜色都会比上边内容区域要暗，因为footer的信息在逻辑的级别上是次要的。footer区域的主要功能是版权声明、联系方式、友情链接、备案号等信息。在设计时一定要降级处理，不要让footer变得特别明显。

技术原理

网页设计师在做项目之前必须了解网页背后的技术原理，技术决定了哪些设计和交互是可以实现的、哪些是不可以的。同时技术原理也决定了我们需要如何配合前端工程师来完成一些复杂的交互。其实在过去网页前端工程师和设计师是一个岗位，就叫做网页美工，这个职位需要在完成视觉设计后把页面做成静态网页交给下面的环节。随着分工越来越细致，产生了网页设计师和前端工程师两个工种。但是网页设计师不可以脱离技术局限天花乱坠地去设计。下面让我们来了解网站的基本存储原理：在您的电脑C盘保存一个叫logo.jpg的图片，然后在浏览器打开这个网址：C:\logo.jpg你看到了什么？对，就是这张图片。这就是网站的原理：网站的资源和文件存储在一个类似我们电脑的东西里，那就是服务器。我们通过域名来调取网中不同的页面和文件，如果服务器关机了那么网站也就瘫痪了。每次当我们通过浏览器访问网站时，敲击一个网址，这时这个域名会转向一个IP地址，这个IP地址就是服务器所在的门牌号码。找到了以后，我们的浏览器会从服务器上下载网站的代码并把代码翻译成我们能看懂的界面，比如文字、边框、表格等实际上都是代码的形式。浏览器还会把网站中所需要的图片、视频等单独下载到缓存里。当我们通过表单输入用户名和密码时，我们的信息就会上传到服务器中，服务器处理完（比如登陆成功这个信息）然后再下发给我们的浏览器。所以平时我们访问网站时，我们的电脑和浏览器要通过互联网与服务器进行多次“握手”。当然老“握手”会造成加载速度变慢，于是我们聪明的浏览器会把已经下载过的资源缓存下来，避免浪费。这个机制就是“cookies”：浏览器会自动存储你访问过的网址、网站图片、视频、表单信息等。

基于鼠标的手势操作

基于鼠标的交互

在不久的未来，个人电脑可能通过多点触控、语音交互等方式与我们交互，但目前网站设计最主流的交互方式还是鼠标和键盘。来让我们看看鼠标有什么结构吧！我们对鼠标的使用无外乎移动、左键、右键、拖拽四种方式。我们在页面中的大部分操作都是通过鼠标左键点击完成的，所以网页也是点击的艺术。右键一般会唤起右键菜单，但是很多网站与网页应用程序也会将右键自定义设计一些操作和交互。与鼠标发生交互的主要是超链接与按钮。那么让我们来了解一下超链接的四个状态吧（前端术语是：超链接标签的CSS四个伪类）。

按钮与文字的不同状态

Link是指超链接正常的时候的状态。一般超链接需要与普通文字区别开来，比如换一种颜色或者加下划线。当然下划线还有一个作用就是方便弱视群体区分超链接与普通文字。Link默认都是蓝色的（色值：#72ACE3），但是为了增强网站的品牌性我们也可以把链接颜色更换成另一种颜色。总之一定要在形式上与普通文字产生差别才可以。

Visited是超链接被点击以后的状态。比如新浪网新闻非常多，所以点击完一个新闻后用户可能不知道自己看过没看过这条新闻了。所以新浪网使用了Visited属性，点击后的新闻颜色就不一样了，方便用户区别自己哪些新闻还没有浏览。

Hover：是超链接鼠标经过状态。这个状态是连接中最为重要的状态。其实不只超链接，按钮和图片以及视频等一切可交互的元素都应该设置Hover属性，也就是鼠标悬停时的状态。一般来说变换颜色和放大是Hover状态的基本方式。

Active：是指超链接的激活状态。点击后超链接可以通过CSS加载一个状态。

同样的链接样式也可以应用在图片、按钮、表单之上。点击、鼠标悬停、鼠标按下都可以设计成不同的样式，方便用户通过鼠标感知这个物体是被我按下去的，这种给用户的暗示我们也叫做“点击感”。当然按钮会和链接稍有不同，按钮除了具备正常和鼠标悬停等状态，还有一种状态叫不可点击。这种状态将按钮置灰，提示用户这个功能因为条件不满足不可以点击。好了，您可以举出几个点击感Web设计的例子吗？

静态网页

了解完基本技术背景、鼠标的交互之后，让我们来聊点真格的。我们一般看到的网页都是静态网页。静态网页是由HTML编译的，我们在服务器上存储的网页代码基本都是HTML格式。HTML全称是HyperText Markup Language，即超文本标记语言。“超文本”是说这种语言内可以包含文字元素以及调用图片、链接、音乐等非文字元素。HTML语言对于没有编程的人来说可能会很头疼，但是它已经是所有编程代码中最简单的一种了。别紧张，你可以把它当做摩尔代码，它是服务器和浏览器之间的密语，浏览器会将这些密语翻译成我们能看懂的色彩和链接等。那么如果我们用HTML语言写一段文字会是什么样呢？

模拟代码编译过程

没错，代码就是这么一点一点编起来的。在任何网站空白处右键点击查看网页源代码你就可以看到网页的HTML代码啦。HTML这种代码是由一个国际组织 - W3C发布和维护的。W3C创建于1994年，是网站国际中立性技术标准机构。W3C已经发布了HTML的诸多版本，其中影响最深远的是HTML4版本。而HTML5简称H5则可以说是划时代的版本了。H5的标签更加接近现代，并且本身可以播放视频，这就可以淘汰掉Flash插件了。（Flash插件带来了比如系统漏洞、加载速度过慢等问题）同时H5对多平台支持很好，所以适应移动端为王的当今时代。H5甚至还可以变成游戏、Webapp（在网页上如本地程序一样工作的网站，比如蓝湖等）、多媒体等多种形式。可是由于IE浏览器这类不支持HTML5效果的浏览器在用户中占比还很高，所以造成了HTML5发展的制约。浏览器可以理解为一个代码阅读器，由于它对HTML5代码的翻译工作不好就会造成所谓“兼容性”的问题。比如HTML5中可以通过代码给一个DIV添加投影，那么在某些浏览器中就显示不了这个效果。不难理解为什么有程序员会穿着 i hate IE字样的T恤了吧。在每次做完一个网站项目时，测试工程师都会用Chrome、Safari、Firefox、Opera、IE、Edge等多个浏览器测试网站的兼容性，这时通常让前端工程师非常头疼。因为代码动一发牵全身，经常这个好了那个又不行了。但是针对这种问题也有一些解决方案，比如减少对用户占比不高浏览器的支持、对不好搞的浏览器单独加载特定的适配代码等。道高一尺魔高一丈呀。

其他前端语言

有了HTML这个骨架，加上图片和多媒体后，网站的发展速度就更快了。但是服务器的损耗很大：所有用户都需要重复地来服务器下载代码和图片等资源进行“握手”，而且很多HTML代码都是重复的，造成了资源的浪费。比如，如果我网站的头部都是黄色的、链接都是蓝色的，那么每个页面都会啰嗦这几句代码。这个问题没多久就被一种崭新的代码解决了：CSS技术。CSS是层叠样式表的意思：我们可以理解为现在把网站的样式（颜色、大小、位置等样式信息）也就是CSS和网站的内容（文字、图片、链接等内容信息）也就是HTML完全分开，并且一个网站可以下载一份CSS然后不同页面都调取这份CSS的缓存，那么就节省了服务器资源。另外，由于网站需要一些交互效果，比如点击和菜单等，那么需要前端工程师使用Javas cript代码来配合。Javas cript是一种比较短小精悍的语言，构建一些基于浏览器的非常顺手。所以目前主流的网站配置是HTML5+CSS3+JS代码的组合，当然为了兼容那些低端浏览器也可能使用HTML4+CSS+JS的套餐。这取决于我们的主要目标用户群在使用什么样的浏览器。当然，我讲这些并不是要求您去学习HTML、CSS、JS代码然后进行前端开发，因为在现代互联网公司里已经有专业的前端工程师了。我们了解这些主要是要理解前端工程师的工作以便更好地配合他们。

主流形式：HTML + CSS + JS

动态网页

了解完静态网页还不够，现在让我们谈谈网站如何动起来。动态网页不是说它有狂拽酷炫的动画，而是动态网页会随着时间、内容和数据库的调用而产生动态的网页。比如今天看到的新闻网站和昨天的新闻肯定不一样了，可是网站首页的HTML代码并不需要人去手工修改，而是让小编通过后台录入新闻、上传图片就好了。小编上传后台的过程就会输入数据库，而动态网页又是调取数据库内容显示给用户的一种形式。动态网页会随时调取数据库中的信息给用户，而对用户来说似乎静态网页和动态网页长得都是一样的。那么最傻瓜的判断方式是看网址结尾，静态网页结尾是html或htm，而动态网页由于使用了高级网页编程技术，结尾则是Asp、Php、Jsp等。Asp、Php、Jsp、Aspx、Cgi都是动态网页的语言，当然有的时候为了让网站效率提升也会使用伪静态结构，结尾和静态网页就一致了，但是实际上是会在用户访问前调取一遍数据库的。同时动态网页的网址会有一个特点，含有？符号。动态语言目前最火的是Php，较早而现在比较少见的是Asp、Cgi，最安全的是Jsp，所以很多银行采用JSP编译。了解完这些，我们基本就弄清楚网站的运行原理了。

主流后台编译语言：PHP ASP JSP CGI

雪碧图

我们经常看到网站中会有动画，那么动画实现的原理一般有如下这么几个：第一，HTML5视频播放；这种方式缺点就是不兼容低端浏览器。第二，Flash Player播放器播放；这种方式的缺点是Flash安全性很低而且效率慢。第三，动画使用Gif格式；这种方式的问题是动画长度不够，并且这个格式仅仅支持透明和不透明两级属性。那么像Google首页Doodle的动画是怎么实现的呢？这种技术叫做：雪碧图。CSS雪碧 即CSS Sprite，也有人叫CSS精灵，它是一种CSS图像合并技术。它本身调用的图片是支持多级透明的PNG格式，然后把动画并排排列出来。比如一个卡通人物的动画每帧宽度是100px，那么就把它的动作1 动作2 动作3 动作4 并排放在一张宽度是400px的PNG图片里。然后代码在一个100px的宽度框子内背景图调用这张png，我们就看到了动作1，然后过一秒钟代码会悄悄移动100px我们就看到了动作2。由于速度很快就让我们看到了连续动画。雪碧图也有自身的缺点：如果帧数太多，会消耗很大的内存。所以帧数一定要控制少。如果你的动作设计了12帧，那么我建议你可以试试将2,4,6,8,10删除，保留一半的动作。

雪碧图

视差滚动

视差滚动是一种运动速率不一样的设计效果，用以实现空间感。比如密尔沃基警察局官网就大量运用了视差滚动效果。其实现原理是，代码判定网页滚动，滚动时页面中三层图片运动速率和位移距离不同。这样给人造成的视觉体验仿佛是我们在物理现实中看到的空间感一样。视差滚动已经不是什么高新技术，如果你的网站比较适合视差滚动，请大胆设计并和前端工程师提需求，相信前端工程师可以满足你的要求。我们需要准备的就是运动速率不同的分层静态PSD文件。

运用了视差滚动效果的密尔沃基警察局官网（milwaukeepolicenews.com）

网页设计规范

终于，经历过长篇大论网站的原理与组成部分后，我们要谈谈网站设计的规范了。网站设计并无具体平台限定的风格，也没有必须要设计的系统级导航栏和工具栏。所以网站设计更加灵活，然而因为太灵活也会让我们的设计师无从下手。那么接下来我将介绍网站设计的规范，在您工作的时候可以参考。注意，在设计之前一定要和前端沟通我们使用的尺寸、字体、交互等，这样有助于后期不会有误会。

画板尺寸

因为网页尺寸与用户屏幕相关，而用户屏幕的种类难以统计。所以我们的设计稿只能主要顾及主流用户的分辨率，其他分辨率用适配的方式来解决。在版Photoshop网站Web预设尺寸给了我们一些启示：常见尺寸（1366x768px）、大网页（1920x1080px）、最小尺寸（1024x768px）、Macbook Pro13 （2560x1600px）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等。这些是主流尺寸，而我们如果做网站时建议按主流的分辨率1920x1080px来设计。所以我们通常设计网站时的网站宽度为1920px，每个屏幕的高度约为900px。为什么是900px呢？因为1080还要减去浏览器头部和底部高度，大约就是900px了。内容安全区域为1200px （或1000px / 1400px）。以这个尺寸来设计相对标准。当然在设计网页前需要知会前端设计尺寸，因为对于适配的方式和后续配合他们更有发言权。

网站的尺寸规范

文字规范

我们现在都知道了网站上面的文字是通过前端工程师重新写在代码里的。那这种文字在浏览器上的渲染与系统和浏览器有关。比如在苹果电脑上看到的文字效果和Windows系统电脑上看到的文字效果就有所不同：苹果会对文字进行渲染，而windows的文字几乎充满了像素颗粒。按照用户占比来说无疑Windows的用户是主流，所以尽管我们可能使用苹果电脑设计网页，但是设计出来的网页效果也应该和Windows显示一致。否则我们设计完漂亮的设计稿，程序员无法还原成我们设计的样子。另外，字号的大小也非常重要。网页的显示区域决定了文字不可以过大，在网站设计中我们的文字大小一般来说是12-20像素。为什么不能比12px更小？因为如果比12像素更小的中文无法放得下复杂的笔画了。而且奇数的文字表现和适配都不好做，也就是说我们必须使用偶数的字号来设计。那么总结一下：文字使用宋体、大小为12px、渲染方式选择无。稍大一些的字体使用微软雅黑、大小为14-20px、渲染方式选择Windows Lcd或锐利。另外，英文和数字需使用Arial字体，渲染方式选择无。

网站字体规范

图片规范

网站设计中的图片常用4（宽）：3（高）、16（宽）：9（高）、1:1等比例。具体图片大小没有固定要求，但整数和偶数为佳。主要是考虑到一些适配的问题。作为内容出现的图片一定需要有介绍信息和排序信息。图片的格式有很多，比如支持多级透明的png格式、图片文件很小的jpg格式、支持透明/不透明并且支持动画的gif格式等。在保证图像清晰度地情况下文件大小越小越好，如何让网页使用的图片更小呢？

第一种方法，给程序员切图的时候我们可以适当缩小图片文件的大小。比如Photoshop中存储为web所用格式就会比快速存储文件更小。

第二种方法，可以尝试使用例如Tinypng、智图等工具再次压缩图片。这些工具会把图片中的多余信息删除并且压缩，而图像质量不受损失。

第三种方法，Google研发了一种Webp格式，它的图片压缩体积大约只有JPEG的2/3，能节省大量的服务器宽带资源。比如Facebook、Ebay还有我们设计师常用的站酷图片存储都是使用了Webp图片格式。

第四种方法，浏览器和服务器握手时需要下载网页所调用的图片资源，那么如果一个网站有一百张图片的话，浏览器和服务器就得握一百次。第一会耗费服务器资源，第二访问速度就会慢一些。所以前端工程师们有一种做法，就是把网页中所使用的图片拼成一大张png。然后每个调用图片的元素都调用这张图片然后分别位移一点儿，显示的那块区域移动到一大张图片中所需要的那个图像。

在线压缩工具Tinypng网站

按钮

按钮的风格在过去的十几年发生了很大的变化，由一开始的“斜面与浮雕”风格过渡到后面的“拟物风格”，现在更流行的是扁平风格。如果按钮在一张图片中，为了不影响图片的美观性，会去掉填充只保留边框，这种设计方式叫做幽灵按钮。注意在设计按钮时记得同时设计好按钮的鼠标悬停、按下状态。

不同时代下不同的按钮风格

表单

在网站设计中我们经常需要使用一些输入框、下拉菜单、弹窗、单选框、复选框、编辑器等。这些都是系统级的控件，一般是直接调用系统设计的。但是系统设计有时不能满足我们的要求：系统内置的表单高度不够，点击起来不舒服；不符合网站整体设计的品牌感等。那么我们可以通过CSS给这些表单增加样式，包括颜色、大小、内外边距等。所以我们遇到涉及到表单的需求时也可以进行自定义设计。

表单不同风格的设计 UIDE Kit  by Mateusz Dembek

栅格

我们把整体宽度定义为W。然后整个宽度分成多个等分单元A。每个单元A中有元素a和间距i。所以他们之间的关系就是 (A×n)-i=W。当然每个应用的尺寸不止可以整除成一种栅格，这就要看我们内容排版的疏密程度了。之后，我们将过多内容的栅格和另一个栅格相加得到更大的排版空间；其他元素都须老老实实呆在自己的栅格内，这样就完成了一个布局非常科学的设计了。 比如

如果网页宽度是1000px，我们可以使用：

20列每列40px和10像素间隔

20列每列30px和20像素间隔

25列每列30px和10像素间隔

25列每列20px和20像素间隔

如果网页宽度是990px，我们可以使用：

11列每列80px和10像素间隔

18列每列35px和20像素间隔

25列每列45px和10像素间隔

33列每列20px和10像素间隔

如果网页宽度是980px，我们可以使用：

14列每列60px和10像素间隔

14列每列50px和20像素间隔

28列每列25px和10像素间隔

栅格系统具体有以下优势：能大大提高网页的规范性。在栅格系统下，页面中所有组件的尺寸都是有规律的。另外，基于栅格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

网站的栅格化会使网站看起来更有秩序感

适配Retina屏幕

2012年苹果发布了Retina Macbook Pro，Retina屏幕的电脑占有量越来越高了。Retina屏幕简单地说就是屏幕密度是传统屏幕的两倍，拥有更大地清晰度。甚至可以满足我们视网膜最高的识别度，所以也叫视网膜屏幕。这种屏幕下我们设计的安全距离大约为1000像素的网站就显得非常粗糙了。所以如果我们现在Retina屏幕下显示一个400X300PX的区域，实际上我们需要提供给前端一张800X600PX的切图才行，因为Retina屏幕一个点顶过去两个像素。那么我们的用户是视网膜屏占比更多的用户，比如设计师群体，那怎么兼顾高清屏幕和普通屏幕呢？

首先我们需要以视网膜屏幕大小完成设计稿，建议是传统设计稿的两倍。之后切出两套切图（非Retina屏幕用户如果也加载双倍大小的资源会很慢），普通的切图命名为如logo.jpg，Retina切图命名为logo@2x.jpg。前端用代码来识别，如果屏幕是Retina就加载双倍尺寸，不是则加载普通尺寸。前端可以使用Retina.js（https://retinajs.com/）提供的技术进行识别。

自适应与响应式网站

我们看到有些网站使用电脑端或者手机端甚至iPad去浏览时体验都非常好。这就需要我们为了用户体验而进行网站的自适应或响应式布局了。响应式与自适应的原理是相似的，都是通过代码检测设备屏幕宽度，根据不同的设备加载不同的css。

自适应网站

自适应网站的设计稿是一致的，但是设计稿需要考虑屏幕变小时的变化方式。比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局。比如站酷网、Dribbble等网站都采用了自适应布局。

响应式网站

响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的CSS样式。比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的CSS样式。对于设计师来说，自适应需要考虑网站在不同设备宽度下的整除与排版；响应式则需要设计电脑、平板、手机等至少三套设计稿（但这三套设计稿的内容是一致的）。总之，自适应和响应式都是网站为了用户体验所适应浏览设备而做出的努力。

适配的规范

手机方面：适配手机页面时，我们一般以iPhone为画布标准。原因是iPhone相对显示比较清晰，并且要求较高。而且用户占有量也很高。在适配时我们一般以750x1334px尺寸为主，然后将网站导航改变为手机APP常常使用的汉堡包+抽屉式导航的形式。同时网站里的按钮也需要变为手机APP中我们看到的左右几乎满屏的按钮，并且每个按钮要大于88PX，方便手指的点击。字体方面，我们要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用SF-UI代替。也就是将网站改变成一个类APP的手机网页，这样才可以保证手机用户体验良好。如果用户使用安卓手机，那么前端代码则会基于设计稿的设计适度加大图片与间距来适应安卓屏幕。

iPad：iPad的尺寸为1024x768、2048x1536px等，无论怎么变基本与电脑屏幕尺寸类似。所以在iPad上浏览网页是基本舒适的。因此，很多网站并没有专门为iPad做适配，如果我们希望iPad用户用的更爽，可以从文字大小（24PX以上）、按钮大小（88PX左右以及以上）、交互形式（抽屉式导航、导航不随屏幕滚动）等方式入手。

不同设备的注意事项

总结

无论您面对的项目是To C的还是To B的网站产品，我们都应该首先确立设计风格 > 寻找设计素材 > 建立情绪板 > 完成视觉稿 > 切图标注 > 建立视觉规范 > 进行项目走查。

如果设计一般网站的页面，可以按照1920 X 1080px尺寸设计。每屏高度900px，字体使用宋体 12px 无 和微软雅黑 14-20 Windows LCD。Banner尽量满屏，但是图片需要按照4:3或16:9等比例来设计。做网站时可以建立栅格以更好地进行自适应和响应式布局，我们也要为超链接和按钮设计不同的相应鼠标的状态；另外我们也可以多多尝试在网站设计中加入视差滚动、雪碧图动画等好玩的交互。

如果设计手机端的页面，可以按照750X1334PX尺寸设计。字体使用苹方 24PX以上 锐利。英文字体使用SF UI。按钮和点击区域需要大于88PX方便手指点击。并且头部需要预留出微信或浏览器的导航区域。

怎么样？阅读完本文您是否有所收获呢？欢迎在评论区讨论哦。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

荔枝微课app体验报告：与AI结合，将有更大发展空间

人人都是产品经理 2018-07-21 13:14:44

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

荔枝微课是目前市面上知识付费领域非常优秀有竞争力的产品，本文对荔枝微课的产品设计进行了分析与思考。

一、产品概述

1. 体验环境

• 体验版本：4.3.0
• 体验设备：华为mate10（128G版）
• 安卓版本：8.0.0
• 体验时间：2018年7月

2. 产品简介与定位

荔枝微课的应用介绍：

“荔枝微课是连接人与知识的内容分享平台，支持随时随地授课听课。与大咖、草根，一同共赴知识盛宴。”

可以发现，荔枝微课主要着力于打造一个全民学习知识&全民分享知识的大众知识分享平台，其核心内容则是平台沉淀下来的知识内容，其运营的关键是源源不断的能吸引用户购买的知识输出。

其核心价值主要有2点：

对于知识学习者来说，荔枝微课可以为用户提供一个内容丰富的，可以随时随地进行学习的知识平台，满足用户能够方便快捷获取知识的需求。

对于知识分享者来说，荔枝微课可以为用户提供一个知识变现并实现自我价值的平台，以及平台为知识分享着提供的推广及流量支持。满足用户通过分享知识而实现个人价值并获得现实收益的需求。

3. 用户需求分析

3.1 用户画像

在进行需求分析之前，我们先来了解一下荔枝微课的用户群体，进行简单的用户画像，以便我们更加准确地进行需求分析。（PS：用户画像主要基于二手数据资料、竞品分析和个人体验产品后的逆向推理得出，由于个人水平以及时间问题，如有偏差望见谅。）

3.1.1 平台角色

经分析可发现，平台中主要存在两大角色：知识分享者（知识分享者又可以细分为机构和个人，在本文中不做区分）和知识学习者（也可以称作知识消费者）。

从产品的运营模式来看，很多用户既是知识消费者，又是知识分享者，用户在平台上学习自己欠缺的知识，分享自己的一技之长，形成了一个良性循环。

在体验中我发现，知识分享者的知识分享流程主要是通过PC端的“讲师管理后台”完成的，因此在针对app的体验中我主要针对知识学习者用户进行分析。

3.1.2 核心用户的基本信息

通过荔枝微课本身以及对比几款竞品的相关数据，我们可以大致推断其核心用户的基本信息：

年龄：通过百度指数以及对核心用户的核心行为-学习各种实用技能知识，进行分析，我们可以看到，主要集中在30-39岁（占比60%左右），同时20-29岁， 40-49岁两个阶段也有不少分布（占比约为20%左右）。

性别：我们可以看到百度指数中显示，其用户性别比例男：女约为6：4。但是我们知道百度指数对于性别判定算法，有时候会产生误差。在荔枝微课这里就发生了这样的情况。

对于荔枝微课的性别比例，我们通过对产品进行分析，可以发现这个性别比例并不准确。

有一下2点理由：

• 第一，在荔枝微课的“发现”页中存在很多的课程分类，我们可以看到其中大部分内容是针对女性用户的：比如母婴、形象、美妆个护、时尚、婚姻等等分类。而且作为优先级最高的第一屏的分类项目是推荐、婚姻、家庭关系、恋爱、母婴、育儿，这几个比较偏女性用户的分类。
• 第二，在产品所有的课程内容中我们可以看到大量的课程都是针对女性用户的，比如瑜伽课、提升女生的气质等等相关课程。

因此我们大致可以进行推理，荔枝微课的用户应当女性偏多，女：男 约为 6：4 到 7：3 之间。

区域：可以看到荔枝微课的用户主要集中在一线以及新一线城市。

收入：对于用户的收入水平我们可以从2个方面进行推测， 一是我们上文得出荔枝微课的核心用户主要分布在一线及新一线城市；二是，我们可以看到在荔枝微课中绝大部分课程的价格都在100元以下。我们可以进行推测，荔枝微课的核心用户应该处于中等收入水平。

用户性格：综合以上所有的分析，大致可以推断出用户的性格有以下几个特征：自我提升欲望强烈、存在一定的焦虑感、对自己某方面现状不是很满意。

二、产品分析

1. 产品结构图

荔枝微课有发现、精选、我的微课、个人中心4个以及导航模块。

• “发现”是分类别展现课程信息，主要是满足用户分门别类查找自己感兴趣的知识的需求；
• “精选”则是平台为用户精心挑选的课程列表；
• “我的课程”是用户学习课程的记录，方便用户方便快捷的进行学习；
• “个人中心”则是用户进行个人设置以及记录个人信息与操作的模块。

其产品结构图如下：

2. 用户使用流程图

通过分析发现，产品中存在2个核心流程，一是用户购买课程流程（购买直播课程流程和购买非直播流程略有不同）；二是用户学习课程流程（学习直播课程流程和学习非直播流程有不同），其流程图如下：

2.1 购买课程流程

购买直播课程流程和购买非直播流程略有不同，购买直播课程流程不需要判断课程是否收费，免费课程仍然进入支付流程，并支付0元。

从分析体验来看，从开始到结束，整个购买课程流程非常清晰且顺畅，中间不存在多余流程，也没有其他任务导致流程中断，用户体验很好。

2.2 学习课程流程

相对购买流程来说，学习课程流程就没有那么清晰顺畅了，我们可以看到直播课程学习流程比较清晰。但是非直播课程学习课程却看起来比较复杂，个人觉得该流程中存在一些多余流程。

（1）首次进入课程存在多余流程

我们从流程图中可以看到首次进入时，产品会让用户选择是从第一条开始听还是直接进入课程。选择从第一条开始听，用户将会进入课程学习页面，并从第一条语音开始播放。而选择直接进入课程，则进入课程学习页面，但课程不会进行播放。

我们可以看到2个不同选择只是有课程是否自动播放的区别，这个区别对用户来说不是必要，但是却多了一个页面，让用户多进行了一步操作。这并不利于用户完成整个课程学习流程。

而且，在体验过程中，我发现在这个选择页面中用户是无法后退的，也无法关闭选择弹框，只能在“从第一题哦啊开始听”和“直接进入课堂”中进行二选一，这可能是为了提升课程播放页面的打开率，但是这样的设置对用户体验不是十分友好。

（2）非首次进入流程存在多余流程

对于非首次进入流程，我们来想象一个用户场景：

在上班的路上，有一个用户对荔枝微课上的一门化妆课程非常感兴趣，她打开课程进行学习，半个小时后她到公司了，她关闭课程开始上班。等到下午下班之后，她想起来自己早上还有一门课程没有学完，想要接着学习，这之后她很希望荔枝微课帮她记住了自己上午学习到哪里了。

我们可以看到，对于用户来说，被打断的课程直接进行续播，才是符合用户预期的。所以个人觉得在用户再次打开自己学习过的课程时，给用户“继续未听完的课”和“直接进入课堂”的选择是比较多余的，用户其实不需要这样的选择。这种不记住自己的学习进度的选择，反而是用户想要避免的。

3. 导航结构分析

荔枝微课有发现、精选、我的微课、个人中心4个一级导航模块。

• “发现”主要是分类别展现课程信息，主要是满足用户分门别类查找自己甘心去的知识的需求；
• “精选”则是平台为用户精心挑选的课程列表；
• “我的课程”则是用户学习课程的记录，方便用户方便快捷的进行学习；
• “个人中心”则是用户进行个人设置以及记录个人信息与操作的模块。

接下里我们来分析一下荔枝微课的这个导航结构：

首先是“发现”页，发现页汇总了各种课程信息，并通过头部导航分类别进行展示，形成了典型的首页风格。从结构设置上来看并没有什么问题，但是个人在体验中发现其在内容展示上还是存在一定的优化空间。

3.1 三个功能按钮内容不随顶部导航切换

如截图所示，在每个分类导航的轮播图下方，都有“我的课程”、“精选专题”、“免费专区”三个按钮。点击按钮我们可以发现都是相关的课程列表，显然，这是产品为了吸引用户点击而专门设置的。

但是比较令人不解的是，这几个按钮的内容并不随着用户选择分类的切换而切换。无论是用户选择婚姻分类还是理财分类，精选专题为用户展现的列表都有可能是一些中医课程或者是英语学习，不会随着用户选择的不同而量身推荐内容。

另外，这种设置不但没有根据用户的兴趣进行针对性的推荐，而且，会对用户造成一定程度的误导，从用户的角度来说，导航切换了该导航下的内容进行相应的切换是一个顺理成章的逻辑，但这三个模块内容却不进行切换，这并不符合用户的操作认知。

3.2 如果能更智能的进行个性化课程推荐可能会更好

我们从结构图中可以看到，发现页中共有26个分类导航，涵盖各种年龄阶段，不同性别不同层次的用户群体可能感兴趣的所有课程，可以说是课程内容非常丰富了。但是，如果用户对排名比较靠后的某一个类别感兴趣的话，那么他想要找到这个类别就会相对比较困难，而且在进行左滑的时候很容易错过中间某个分类。

同时，在体验的过程中，我用了男女两个性别不同的帐号进行体验，发现所展示的内容完全一致，连导航的排序也一致，这说明产品没有针对细分用户做一些相对个性化的区分。

我们知道，对于非基础知识的获取需求，不同的用户群体的需求可能差异很大，所以如果产品能够应用人工智能或者是大数据等技术对用户进行相对个性化的信息展示，那么在转换率以及用户体验方面都应该都会有所提升。

然后是“精选”页，个人觉得精选页存在2个问题：

第一，是与首页一样没有针对细分用户进行个性化的区分，我用了男女两个性别不同的帐号进行体验，所展示的内容完全一致。当然，精选课程列表可能选取的是一些相对比较热门的课程（热门也是一种吸引力的保障），或者是一些产品出于商业盈利或者其他考虑而特意选出的部分课程，所以倒是不一定非要有用户针对性。

第二，个人觉得其实精选课程并不需要作为一个一级导航页存在，其实精选课程的内容，完全可以由发现页中的“推荐”分类进行承载，只要在推荐类的课程列表中进行一些模块划分便能实现，并不需要显示一个专门的一级导航页。

接下来是“我的微课”页，分为全部课程、最近学习、即将开始三个模块。这里记录了用户购买和学习过的课程记录，满足用户方便快捷进行回溯或继续学习的需求，是一个非常好的页面。

但是，也存在一点点小问题，那就是被添加进来的课程不能进行管理，如果用户无意间点开一个自己不感兴趣的课程，后面想要删除，无法实现。在用户打开过的课程越来越多时，可能会造成不好的用户体验。

“个人中心”页，个人中心页是一个典型的个人中心页面，这里就不进行进一步分析了。

4. 核心页面分析

接下来我们对产品的几个核心页面进行一下分析。

4.1 课程详情页

首先是“课程详情”页，我们先想象一个场景：

一个用户在推荐页看到了一个瑜伽课程感觉挺有兴趣，于是她点开了这个课程，想进一步看看课程更详细的信息，好决定自己是不是要购买这个课程。课程详情页信息影响着用户是否购买的决策，是一个非常重要的页面。

我们来看看课程详情页的构成。

• 功能：购买专栏按钮、课程试听、分享课程、关注课程分享者帐号。
• 信息：封面图、专栏标题、价格、课程更新进度、在学人数、课程详情、课程目录、人气榜、课程分享者帐号信息。
• 需求：用户想进一步获取更详细的课程信息，好决定自己是不是要购买课程。
• 思考：从信息内容来看，荔枝微课的课程详情页做得非常好，尤其是页面主体“详情”内容总能把课程非常具有吸引力的内容提炼出来，可以说从内容运营方面来说领先于市面上很多产品。

不过从功能的角度来看，荔枝微课还是可以进行小小的优化，首先便是缺少直接的咨询按钮，我们知道用户在进行购买决策时，如果能为用户提供一个咨询客服的入口，会一定程度提高转换率。

当然，因为平台上存在大量的个人讲师，因此，如果增加咨询按钮的话，这大量的客服工作可能需要平台来承担，这样会大量增加平台的成本。所以，目前荔枝微课的课程没有直接的咨询入口，也有可能是出于对成本的考虑。

然后，就是已消费用户的评论也是影响用户购买决策的重要因素，如果能在课程详情页中增加用户的评论，可能会锦上添花，对用户的决策产生正向影响。

而且，这种评价体系也将为优质的课程做更好的背书，再辅以一些相应的算法对课程进行排序，这可以促进讲师们提升自己的课程质量，长久下来将有助于平台整个课程质量的提升。

4.2 课程播放页

视频播放页也是产品非常重要的页面之一。我们可以看到左图是荔枝微课的课程播放页，右图是进入课程学习的上一步，选择是“继续未听完的课”还是“直接进入课堂”，如果用户是第一次进入课程则是，选择“从第一条开始听”还是“直接进入课堂”。

在上文中我们已经提到过这个选择页面对于整个学习课程流程的完成有一定的多余，不过从其课程播放界面我们看到课程并不是一个完整的视频或音频而是一个模拟直播现场的分条课程页面时，我们大概能理解为什么会有这样的选择了。

我们知道讲师进行课程直播，然后将这些直播的内容进行沉淀，供用户反复学习，这是荔枝微课的一大核心特色。荔枝微课设置如上的课程学习页面，可能是为了更好的还原直播课程现场，包括直播的气氛、讲师与学生之间的互动交流碰撞出的火花等等。

不过，我们来想象一个场景，当不在那个直播氛围中，用户对于一条一条的去刷整个课程讨论的需求有多高呢？更何况很多讲师在直播的时候可能还不允许用户进行讨论，全程只是讲师在进行讲课。那用户更希望将这个内容一条条拆开还是将讲课内容整合起来听呢？我想答案应该很明显吧。

我们可以看到，其实在产品中还有一个不一样的播放页面，如下图所示，我们可以看到这就是直接将课程进行了整合，而且用户如果想要观看上课模式，可以直接进行切换，个人觉得其实所有的播放页面都可以直接采用这种模式。

这样不但能给用户自主选择的余地，而且我们在课程播放被打断之后，再次进入课程播放页的时候，也不用再选择是“继续未听完的课”还是“直接进入课堂”，而是可以直接断点续播。

当然，荔枝微课这样的页面设置可能背后有由于我个人产品能力不足，或者是我对荔枝微课了解不够深刻所导致的认知误差，如果是这样，还请海涵。

三、总结

由于时间问题，这篇体验报告写得并不是很深入，有的观点也不一定准确，如果有一些不当之处，再次致歉。然后对于文中提到的一些问题，主要是秉持着希望荔枝微课发展越来越好的初衷进行体验的，还希望各位不要觉得这是一篇找茬文才好。

总结来说，荔枝微课是目前市面上知识付费领域非常优秀有竞争力的产品，不过现在产品针对用户进行个性化的定制变得越来越重要，尤其是这种知识付费产品，如何让用户迅速找到自己愿意付费的课程成为了产品的重要竞争点之一。

个人觉得如果荔枝微课能够在抓住在线教育风口的同时，再辅助以一定的人工智能、大数据等新技术进行提升，应该会带来更大的发展空间。

本文由 @钟娟娟 原创发布于人人都是产品经理。未经许可，禁止转载

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务