UI视觉与插画 8 既然聊到UI设计师，大家应该知道UI设计师的涉及范围包括高级网页设计、移动应用 界面设计，是目前中国信息产业中最为抢手的人才类型之一。随着科技的发展，智能手机、 移动设备的普及，也促使UI行业越来越火。当然更主要的原因是市场需求量有增无减，很多 社会服务类应用如雨后春笋般强势生长，势头迅猛不可阻挡。所以UI设计者的行业需求一目 了然，但学习能力与实力并行的人才，才是行业更需要的。如果作为小白，你只知道摆摆页 面，让你去做些宣传图或者活动主题页面画幅插画就两眼发直，想想后果有多可怕自不必多 说了。因此学好插画有多重要不言而喻。 作为大学生或参加工作有些年头的职场新锐们，大家对职业有规划吗？就像喜剧小品中 的一句台词：梦想实现了叫梦想，没实现那叫白日梦！著名经济学家戴尔·麦康基说：“计 划的制订比计划本身更为重要。”人生真的很快，不会等你过多地驻足停留，不会让你享受 过多的下午时光，不会让你无休止地享受青春，这一切就是现实，也衬托出青春的珍贵。当 你在公司无休止加班的日日夜夜，当你陪客户聚会的分分秒秒，在你不得不为生计辗转于招 聘会的时候，职业规划对未来迷茫的人就显得尤为重要。 个别有为青年会在大二暑期开始寻找实习机会，大三进入专业的职场实习并成为骨干， 大四毕业顺利进入大企业或有职业发展的公司就职，有些甚至直接成为合伙人变成CEO。 别人的成功不是因为抓住了更多机会，而是面对未来的生活和职业有着强烈的进取心和严格 的规划，或者说有目标就有奋斗的动力，不会每天活得浑浑噩噩，一生只有一条轨迹。曾经 我的一个同事，年龄不小快奔四还考了个MBA，她是个前端工程师，每年元旦会给自己拟 定这一年做10件事的目标，例如坚持每天早起背10个单词，一件一件的坚持做，今年做不 完明年继续努力。这个世界不缺少努力求知的人，最可怕的是比自己优秀的人还在努力学 习。当你心浮气躁的时候，对工作满肚子抱怨的时候，请多去反省自己，也多去思考，努力 解决问题，相信知识的力量，同时不断丰富自己的头脑，并相信未来的自己一定会更出彩。 路的长度不在于别人怎么说，而是自己如何坚持走下去，并不断拓展业务能力。我曾经 面试过一位女士，她之前的工作是做线下活动设计，例如海报和展板设计等，工作了5年然 后去结婚生子，孩子上幼儿园后她也准备出来工作，可这一晃离开职场4年，33岁的她想进 入UI行业，仅仅靠曾经的作品，显然不够。我们要清楚一点，职场其实就是战场，离开了再 回来，如果没有过硬的实力或一技之长，想走远绝非易事。更何况如今很多电商企业都要求 有3年以上的插画经验，这似乎成为了进入UI面试的基本要求。机会给有准备的人，如果你 还没有准备显然已经错过了一切。下面来看一下当前设计趋势（下图来源于花瓣）。 UI视觉与插画 首先是团队结构，大家都知道任何产品设计很少有靠一己之力完成的，所以一个完整的 产品团队需要至少以下几个部门来配合产品的研发。一是产品部，一个梳理完整产品核心流 程的部门。二是技术部，一个能够搭建好用且高效的数据平台的团队。三是营销部，针对品 牌旗下的产品全力推销的部门。四是设计部，带给产品无上想象力的团队。五是客服部，例 如一个旅行类的应用，网友订单出现问题，客服同学是维护产品和品牌形象最好的团队。看 似每个团队各有分工实际就是共同打造产品的一个集体。所以团队合力解决问题，高效沟通 是必不可少的。当然这些部门是一个产品最核心的部门，围绕公司还会有其他部门来维护。 下面进入UI流程。众所周知移动端的产品类型繁多，符合市场发展需要的，能为社会服务 同时带来经济利益的产品才是开发者所热衷的目标。因此好的产品需要做非常细致的前期调 研，针对目标用户获取更多用户需求，评估产品可执行度以及未来所带来的社会价值。当一 切条件准备就绪，这时就需要产品团队来梳理周密的产品逻辑，将用户所需所求巧妙地串联 起来，形成原型图交给设计师。交接的过程是一个反复沟通的过程，同时也是大家对产品逻 辑提出看法的过程。 另外UI设计师还要进行软件的人机交互、操作逻辑、界面美观的整体设计工作。设计中 要考虑目标用户的不同，引起交互设计的重点不同。同时UI设计师需要提升产品品质，将完 整的视觉图呈现给技术开发团队以提供真实参照。因此对于UI设计师来说，沟通、分析原型 图就是第一阶段（下图）。 网络原型为例 第1章 UI设计前景及趋势 13 上图是一个手机端超市App的原型图，设计师拿到原型图就需要对产品展开交互思维的 考虑，下面我们从第一个注册登录页面开始分析一下。 ●● 注册登录页面：常规的设计如原型图所示，只要将用户的注册和登录内容排版好， 将空间、背景色调、背景质感设计出来就完了。实际上这个部分用户所看到的只是 一个页面，但设计师需要考虑很多意外状态，例如登录信息输入提示，登录时用户 信息输入错误页面提醒，忘记密码与注册button或文字链接形式。这些只是一个初 级考虑。深入考虑包括注册信息的详细页面跳转，找回密码失败用户如何登录等这 些页面的设计。如果产品在开发过程中有完善的登录信息系统，那么设计师就不用 考虑这些，如果是一个新产品，那就必须考虑到更多。 ●● 首页：HOME页面是所有App界面中最重要的展示页面，判断产品好不好，好看也 是很重要的因素。这里的好看不仅仅是样子，还包括卡片是否用圆角、页面布局用 哪种形式展示最优化、字号大小、色值变化等更多细节。在这里HOME页面需要跟 产品沟通的一些关键环节如下：上图中A抽屉式菜单内的内容形式不宜过多；上图 中B搜索一般在页面最上方通栏展示；上图中C产品分类展示是要用左右滑块模式 还是更多跳转页面模式取决于内容多少；上图中D购物车在页面右上角是否有更新 提示；上图中E整体商店部门分类并不能与搜索齐平，可以从底部菜单进入；上图 中F箭头代表页面会有更多信息，因此下方的左右滑动的手或许有些出入，设计中 可以根据具体信息多少再来考虑。 ●● 侧边栏页面：这部分设计可以参考Google邮箱等App，侧边栏的形式有很多，例 如九宫格、六格，以及上下排列形式，侧边栏的展示往往是因为应用功能过多，从 而作为分类形式的一种展示。如果分类过长产生滑动，可能会对用户体验产生影 响。所以设计需要跟产品密切沟通做出最合适产品的视觉界面。 ●● 商品列表：列表页的重要程度仅次于首页，一个App想要找到用户心仪的商品，其 一是搜索打直球，其二是列表，在翻看过程中发现自己喜欢的一类商品，毕竟列表 是商品总类的集合。对产品的分类如电商类应用，很多时候左侧是文字形式的表 单，右侧作为展示，这里大家可以参考淘宝。如果没有太多商品那么下图商品列表 中红色箭头所指的分割方式就不适用了。可以选择通栏展示的方式或者放大产品图 的展示方式，例如家具店的商品桌子，无非采用材质、尺寸、颜色作为区分。所以 在列表页大家只要做对“多”和“少”类型的分类展示就好。 ●● 搜索：搜索是很多应用必不可少的功能，因为很多电商类、产品类型的应用内容繁 UI视觉与插画 杂，信息比较多，用一个全站搜索功能，能大大提高产品的易用性。因此搜索过程 中出现关键词推荐和以往关键词搜索的历史记录，这两者如何展示，需要针对产品 的形式进行探讨。 ●● 加入购物车：Drag Product Here To Add ToCart，PM建议拖动产品添加到购 物车，有些时候用户的交互形式往往需要培养，就像以前人们回家都会用钥匙开 门，忽然有一天用指纹开门了，可找钥匙的动作还会持续一段时间。任何新的用户 习惯都需要时间积累。另外这个操作大家有没有感觉像电脑的操作习惯呢？对于产 品的理解一定是多思考，多沟通，适时表达自己的看法。让更多人看到UI设计师的 交互视觉兼备的能力。 ●● 更多商品：如今产品图的展示颜值是加分项。其分类方式应根据整体产品的多少， 毕竟越大的图对视觉要求越高。 当然一个应用设计不会就这几类页面，作为UI流程来说却足以告诉大家，保持产品思 维和有效沟通是工作流畅的开始。UI视觉设计师就像一个翻译，需要将原型图翻译成视觉 效果图，翻译出来“开发”的视觉效果图做给“用户”用。这个过程不该闭门造车，而是 多听取大家对产品的看法。俗话说，三个臭皮匠顶个诸葛亮，团队的力量是巨大的，尽量 避免孤军奋战和英雄主义。最后版式方面的技能就属于设计师的自我修养范畴，多看多思 考多积累经验。 UI视觉与插画 Google-Material Design和iOS规范，都是非常好的学习参考，特别是Google的 规范，大家可以浏览material.io网站得到很多关于UI设计、用户体验设计、交互设计方面 的知识。网站会从产品的角度非常细致地讲解领先的交互思路，以及一些实验性质的交互思 考，除了有非常规范的界面参考，很多时候Google在做关于人机交互所产生的各种设计习 惯时都做了详细讲解。从逻辑上告诉大家如何将设计与产品使用习惯相结合。例如响应式设 计，在只改变宽度的情况下适配各种页面、载体等。 其实当我们还沉浸在页面的排版、视觉等这些小细节的思考时，Google则已经在考虑 如何能让手机读懂每个人的习惯，甚至产生未卜先知的判断，从人机角度出发思考二者的互 动、互联、互通。所以要想成为优秀的视觉设计师，更需要有对事物的敏感直觉和对产品 的细微体验，才能更深入地做出优秀的设计作品。如下图所示。 Google-Material Design 首先以Android系统的界面为例聊聊如何学习。下图的页面局部，两边绿色部分规划出 内容区与边缘的距离。中间A和B是删格部分，B为删格划分页面的空隙。很多时候大家看 到的是页面最终效果，所以很多设计者会忽略边缘的宽度而直接考虑页面内部板块或卡片的 宽度，甚至有的设计者不用删格的方式设计，这样也就产生了很多并不严谨的页面。规范的 设定能让很多模糊的部分变得清晰。有时候艺术是随性的，设计也是。如果一个页面从最初 的理性入手，那么这样的页面会缺少生动活跃的部分，如果设计从理想入手，或许会产生不 错的灵感。 1.列、2.装订线、3.边距 2. 图标 再看下图，这里图标设计需要利用网格或参考线留出边缘安全区域进行设计。a是一个 像素，a×24就是24磅，R和W是2a就是2磅。我们知道用icon设计非常严谨，相差一个像 素都会产生不同视觉效果，这里以宽形、长形、圆形、方形为例做了对比，比较人们眼中 对形的视觉区域差别，长形的圆角是2个像素，在设计面积上圆形外围大于方形1像素。将 图标最终缩小之后的效果在顶部导航显示。这里的参考线不管是使用Photoshop设计还是 Illustrator都作为辅助参考。 UI视觉与插画 关于图标规范制作最多的就是系统图标，这类图标本身因为功能决定设计形状，一般需 要整套设计。功能性图标每一个都有固定意义，需要高度浓缩并快捷传达信息、便于识别和 引导。必须降低用户的理解成本，并提升界面的美观度。功能性图标区别于App store里的 应用图标，这里应用图标的尺寸受各大平台和手机端限制尺寸方面会有区别。功能图标的设 计主要从视觉的统一、整体简洁、差异化、具象性角度出发，一般都不会出现太大问题。应 用图标的设计按照LOGO设计标准来准备，也要根据产品特性来设计。下图左一为图形大 小差异集合，图标的设计质量也很重要。 圆+两个相同的长方形+一个正方形（源自网络） 3. UI配色 人对颜色的感觉不仅仅由光的物理性质所决定，还包含心理等因素，比如人类对颜色的 感觉往往受到周围环境色的影响。色彩的寓意被后人随着生活方式的改变不断归纳，例如蓝 色（blue）代表轻快、自由、安静、宽容、柔情、永恒、理想、艺术、忧郁、广阔、深邃、 清新，在欧洲一般作为对国家之忠诚象征等。下图为配色网站的推荐方案。 Material.io的网站 如果从设计角度出发，UI的配色一定要与产品的个性、意义相配合。不同的色彩搭配， 产生不同的视觉效果。如果你从业够久，会明显发现如今的色彩不仅鲜艳还更加细腻生动， 这些变化与数码科技的进步密不可分。 UI视觉与插画 颜色搭配运用在很大程度是为提升设计品质，搭配不当往往后果非常严重。所以在配色 方面大家至少要理解色彩中原色、色相、饱和度、纯度、明度这些专业名词的实际含义才能 在软件的设置中如鱼得水。当然如果你对自己的色彩感觉不敏感，或者有选择困难症，也可 以借助一些配色网站或软件进行参考。其实配色和穿衣搭配是一个意思，整体还是要开阔眼 界，不要只局限在某些固有颜色中。就像装修，中西文化不同风格各不相同，例如巴洛克风 格是以暖色系为主；洛可可风格以轻盈、细致、华丽为主；美式风格颜色主要以白色、浅蓝 色、浅绿色等浅色为主；现代风格是时尚与潮流的完美结合，色彩轻快，多以橙色、黄色为 主。设计无绝对，只有不断颠覆。 Flat UI Color Picker：最佳平板UI颜色设计 UI视觉与插画 这里需要设计师的全局把控能力。 系统默认的字体是对App内文案浏览的展示，所以这类字形不能太多变。跟系统字相反 的是活动中的主题文案设计，这些字从展示和使用意义上截然不同，所以这里才是文字设计 的天堂，详见下图。这部分字体设计对初学者会有很多困扰，例如草稿需不需要真的手写， 图形怎么切割才完整，那些风格怎么模仿，字体之间如何关联等细枝末节问题。其实字体设 计就是字体图形化的过程，不管什么风格，只要能将字做成流畅的图形就算完成，同时更多 技巧在本书字体章节中有详细介绍。 作品源自互联网 所以UI规范的目的是更好地展示产品，让产品与用户的交流更加顺畅自然，提高用户体 验，获得用户黏性。好的UI设计不仅要让应用变得有个性有品位，还要让应用的操作变得舒 适简单、自由，充分体现产品的定位和特点。