“当我们无法品鉴一道菜肴美味之处，烹饪将成为一件随机事件：仅仅将食材混合、煮熟、加入调味料；在失败后回锅再造中愈演愈劣，甚至误以为这样既是美味。设计亦是如此。”

在设计评审中，你是否听到过这样的声音：“感觉不够高级、没体现出这个产品/功能应有的感觉、这个按钮为什么这么小、不够突出、为什么用这个风格、我觉得竞品的更好看”等等。如果在设计时没有充分思考，很容易在评审会中败下阵来，但又没有收到明确的优化建议，在会后优化过程中弄得设计师很头疼。
开设计评审会是我的日常工作之一，有时是自己负责需求的评审，有时是参加其他设计师的设计评审进行把关。每位设计师都有自己的想法、设计思路，在工作进行一段时间后，我意识到需要明确“一个好的UI设计”需具备的要素，或是制定设计思路，来帮助设计自己、团队更有效率、有方向得完成这块工作；同时在设计评审时，尽可能地明确问题，并指出优化方向。
形、色、字、构、质、动：构成App视觉语言的六个维度。是否从六维度分别进行设计，拼合起来就可以得到不错的作品？感觉像是拿到一个汉堡的配方表，知道制作一个汉堡需要面饼、牛肉饼、西红柿片、洋葱圈、奶酪片、沙拉酱、生菜叶等食材，但并没有说牛肉饼煎至几分熟？生菜手撕还是刀切？西红柿片切多厚？顺序是否有要求？尽管准备齐了食材，但能否能做出美味汉堡还是一个未知数。

脑子：我会了
手：我还不会

就像菜谱一样，我想在C端产品UI设计中能否制定一些设计步骤、判断标准，来指引自己设计，同时也能更高效得统一、规范设计团队的输出？

设计从需求出发，为需求目标服务；当要定义某类设计中好的设计所具备的要素，首先从设计定义出发。下面聊聊我的总结，共分为两个章节，共计7625字：

1、我对UI设计的定义

2、好的UI设计是什么样的？

1、我对UI设计的定义

人对一件事物的理解、定义决定了他的思维模式，从而影响他选择的解决措施及最终结果。有人觉得UI设计是画好看的图标界面，有人觉得UI设计是做组件规范然后叠到界面中，作为UI设计师的你，你如何定义自己每天工作中在做的事？

UI设计全称User Interface Design，翻译成中文即是“用户界面设计”。界面是设计给用户看的，通过界面这一媒介，我们要像用户传递的是信息。我认为UI设计的定义是通过设计将“界面”中的信息高效传递给用户。图标设计、组件规范设计、卡片式布局、瀑布流式布局、留白分割…这些都是设计手法。

稍微延伸一下，早在屏幕型界面出现前，UI设计即存在了，只是那时还没有这个名称：

以前的报纸排版，一张A2大小的报纸有非常多的内容需要展示。不同用户关注的内容也不同：新闻时事、招聘信息、小说图文等等；因此在排版中运用字体大小、颜色、辅助图形、图案等形式，将复杂的信息布局排版，帮助用户快速找到自己想看的内容。
有没有一种似曾相识的感觉？其实UI设计师在做的就是将需求中要展示的信息内容，在规定界面中进行样式设计，使之能够高效传递给用户。设计本质是一致的，只是信息展示载体在变化，以前是报纸，现在是屏幕界面，以后可能是新的东西。

2、好的UI设计是什么样的？

前面说：设计从需求出发，为需求目标服务，那么UI设计在为什么服务？

我总结出六个服务对象，通过服务对象的要求推导出对设计的要求，并对它们进行排序分为以下四层，接下来一一讲解：

1-1 设计为信息服务

前面讲到：UI设计就是通过设计将“界面”中的信息高效传递给用户，不仅仅是传递，而是需要高效传递。这对界面中的信息易读性提出了要求，如果用户需要很艰难得在界面中查找自己需要的信息，那么无论这个界面设计得多炫酷好看、符合设计流行趋势，它一定不是一个合格的界面设计作品。

什么叫信息易读？

简而言之，用户可花最短时间、最低学习成本从界面里获取自己想要的信息

下面举个

上图展示了两个APP购买火车票的界面截图，当你国庆节前准备购买回家车票时，你更愿意使用哪个？如果你是一位设计师，可能你会觉得A界面像原型，B界面像设计效果图？
为什么会这样？抛开美观角度，我来讲讲我看到的：
信息布局设计：如果是一篇小说，我们仅需根据分段，从上至下进行布局即符合用户的阅读顺序；但如果界面中的信息变得复杂，且之间有不同的关联关系，那么我们需要重新设计信息布局，帮助用户更好地理解、获取信息。

A界面中，能感觉到在界面设计中有意识地将相关联的信息放得近一些，但信息基本按照栅格布局，例如出发时间与出发站之间在视觉上并没有强关联；B界面则将这两个信息根据相近性原则做了布局处理，并将历经时间、车次放在两个时间中间，以简单的图形来表达从出发站抵达目的站。
也许你喜欢极简，但在处理复杂信息时，比起平铺直述，我们要学会玩点“花样”。但切忌画蛇添足，花样过度，抢了主要信息的风头。

A界面座位信息中，座位名称与座位数量之间间距过远，导致在视觉上很难将两个信息强关联起来，用户每次需要从左看到右，跨越1/3屏宽才能阅读完；而B界面利用横向布局，很好地解决了这个问题。
甚至用户可以根据座位信息的横向布局记忆，优先查看自己预期的座位信息。例如用户C通常出行选择更舒适的商务座，那么他在找到合适时间的列车班次后，即可以直接先查看位于“目的站”下方的“商务座数量”，如果卖完了，再向左查看其他座位情况。
另外，可以注意到B界面“座位信息”中“二等座:有票”中使用了英文冒号，它所占的字符宽度比中文冒号更短。让相关联的信息间距更近，这些都是在设计时需要注意到的细节。

信息层级设计：UI设计并不是将所有的信息平铺在界面中，而是根据用户的关注优先级、阅读顺序等，对它们进行差异化设计表现。有时候还真得区别对待。

A界面整体信息在视觉上较平，班次信息和座位信息在字体大小、颜色等视觉表现上基本为平级，这需要用户自己调整注意力，去找自己想看的信息；B界面则更突出班次信息，弱化座位信息，以视觉上的对比为用户设计注意力流动顺序。站在用户在购票过程中以时间为第一优先级的角度，B界面的信息层级更符合用户的阅读顺序。
尽管A、B界面都对时间、价格两个重要信息做了突出处理，但B界面采用了特殊数字字体，和其他系统字体有所区别，让数字的识别度更高。

界面信息展示效率：尽管近几年智能手机屏幕相比iPhone4已经大了不少，但手机一屏能展示的内容还是稀土寸金，用户在界面中停留的时间、注意力也同样稀土寸金，在UI设计中请站在产品角度把屏幕空间高效利用起来，切忌浪费。

A界面中，班次信息与座位信息为左右布局，可以观察到卡片左下方、右侧有较大空余空间；而B界面为上下布局，较为合理地利用卡片空间；在不影响用户阅读的前提下，同样展示三个车次信息，B界面所占界面高度更小，相同屏幕下的信息展示效率更高。

信息可视化设计：信息可视化并不是为了好看、炫酷而故意设计好看的图表，而是站在用户角度，将界面中的信息翻译成用户更容易读懂的形式。从而提高用户的信息获取效率，提升用户体验。

价格的展示：AB界面中关于价格的展示，全都将“价格”字段在前端翻译为“¥”符号，这样的设计在不影响用户理解成本的前提下，有效降低了界面的信息复杂度。

时间的展示：AB界面全都在前端界面展示了“历经时间”信息，有效避免了用户自己计算的成本耗费。而在时间的展示形式上，前端界面中展示的信息来自后台数据，但这些数据并不一定对用户友好。A界面设计了“时间”图标来帮助用户理解这个字段。很明显，“02:06”是后台数据计算的直接结果，B界面则将它翻译成用户更容易理解的形式：“0时59分”。两种不同方式的信息可视化设计，你更认可哪一种？图标在帮助用户理解的同时，是否会加重界面信息冗余？

当然，任何我们看到的界面结果都是背后基于不同的项目背景、目标用户、产品需求的产物，以上仅对两个相似界面设计结果进行对比分析，帮助理解“信息易读性”这一词。
因此在拿到一个界面需求开始设计时，我们首先不是想如何将它设计得好看，而是先思考如何将它设计得易读，去理解界面中的信息逻辑、相关联性，用户拿到这个界面会优先关注哪些信息？产品、业务希望在界面中引导用户关注哪些信息？
在清楚这些之后，运用设计表现手法、原则来帮助界面信息设计表现：利用图标图形更形象生动得表达界面当前的状态、相关联的信息在界面中距离更近（相近性原则）、通过辅助性的元素帮助用户更高效得理解界面内容关系等等。

1-2 设计为用户体验服务
在完成对界面中信息分类、编排后，UI设计师根据自己的审美偏好、风格判断对界面中的文本、图标、按钮等内容进行设计，在这个过程中请不要忽略一点：任何一个界面都属于一个流程、一个产品。切忌为了某个界面的美观，进行过分的自定义设计，甚至违背物理界面的基本设计原则，这将使之与整个产品的视觉、交互规范、用户习惯失之交臂。导致用户抵达该界面时无所适从，需要重新适应、理解这个界面，耗费更高的学习、时间成本。

iOS人机界面指南

因此在进行产品迭代设计时，界面中的一些通用组件样式、交互规范必须符合整个产品的规范。而在产品0-1设计中，也要带有规范组件思维，考虑组件的可复用、可延展性，避免每个界面都有自己的想法，这将成为用户体验、产品设计中的噩梦。
当产品迭代到一定阶段，有较成熟、体系化的设计规范落地，这将带来用户习惯的培养，在与其他竞品竞争时，已有的用户习惯将为用户迁移带来额外成本。在我们不断地迭代优化过程中，同时也在为提高产品竞争力壁垒添砖加瓦。

为信息服务：设计信息易读性高的界面
为用户体验服务：为用户设计统一、规范体验的界面
达到第一层，我认为即完成了一个合格的界面设计，但距离优秀的作品还有一定距离。我们继续看第二层：

2-1 设计为业务服务
我喜欢在逛商场时观察每家店铺独特的装修风格，商场里有各式各样的店铺：餐饮类、珠宝类、化妆品类、娱乐类、服饰类等等，每家店铺在装修中都会结合自身品牌定位、服务品类调性做针对性的设计：

上图中，珠宝类店铺设计得更明亮、高级、精致，它想让店里的珠宝看上去更昂贵，让消费者认为这些珠宝值这个价格；而咖啡类店铺则会设计突出品质感、生活感，它想让这里的咖啡看上去更有品质，让消费者觉得逛街累了坐在这里喝一杯咖啡聊聊天挺舒服的。
钻戒还是那个钻戒，咖啡还是那个咖啡，为什么需要做这些事情？不能安安静静做好产品吗？我认为影响消费者进店、到最后购买产品，除了产品本身因素，一家店给到消费者整体的体验起到巨大的作用：从消费者远处看到店面的第一印象、走店后收到店员服务的体验、试用产品时的体验、商品价格以及是否有活动折扣、网上对这家店的评价、朋友是否推荐等等一切因素，都将成为消费者转化消费的决策依据。
有诸多因素，店铺装修风格起什么用？简而言之，装修就是为了给消费者营造一种氛围，更符合消费者对该店铺产品、服务体验预期的氛围，就这么简单。

回观上图，你是否发现尽管每个店铺装修风格各异，但它们都非常规则得出现在商场对应店面以内，以店铺门面为起点，是否联想到挤在手机方形界面里的无数app界面。互联网仅是将越来越多现实世界中的服务线上化。

把App Store比作一个商场，那么App们即是开在商场里的店铺，有的店铺负责供用户娱乐，有的店铺供用户购物、出行、社交、餐饮等不同的需求。UI设计师就像是一家店铺的空间设计师，大到店铺风格基调，小到地砖尺寸都要精心设计，让店铺/APP风格符合用户对产品、业务、服务体验的预期。说得直白一点：你能不能让你们卖500块的会员看上去真的值1000块，让你们卖的咖啡看上去是同价位里最高端、咖啡豆最优质的咖啡，让用户觉得自己捡到了便宜。
尽管我们遇到的近乎所有界面都是由文本、图形图案、间距、色彩等组合而成。正因为不同产品、业务调性不同，目标用户不同，同个用户对不同品类产品的预期也不同，于是衍生出多种设计风格：

例如儿童教育类的产品通常界面设计得更活泼、亲切。金融类产品更专业、精致，音乐类产品更具调性、设计感。

有时候就算是相同行业的产品也会因为用户群体、产品定位等因素不同，产生完全不同的设计风格。
在虚拟的互联网产品中，我们无法像实体门店传达给用户视听触嗅味觉等全方面体验，我们的界面仅存在于一块发光面板上，为了更好得服务用户，尽可能让用户有身临其境的体验，我们应该为用户提供符合业务属性、产品定位、目标用户预期的界面风格设计，来传递我们的理念、品质与调性。
看到这，你也许会问：这有什么用？
当同样一枚戒指以同样的价格出现在商场专柜和便利店的橱窗里，你更愿意购买哪一个？

当要带10岁的女孩去游乐园玩，恐怖密室主题的游乐园和迪士尼，你更愿意选择哪一个？

2-2 设计为商业服务
如果整个行业、或者某个品类、定位下只有自己一个产品，那设计师大可展开双手，设计出最符合自己产品定位、品牌调性、用户心智的界面。但现实是总会遇到几个和自身行业属性、业务品类、针对目标客群近似的竞品，他们在争抢目标用户、市占比…在这个问题上，UI设计中能做什么？
众多竞品中，用户为什么选择我们的产品？是我们的商品价格更优惠？还是我们的商品品类更全、或是我们产品更安全稳定、或是我们的体验服务更好、或是我们的速度更快。不同类型产品的差异化核心竞争力的重心不同，但我们产品与竞品的差异不应该只存在于产品背后，而是应该明显得被用户所感知到。


下面再举个


以上两个竞品的商品目录界面在信息布局上近乎雷同，甚至在商品类别的图标区都采用了实物风格。两款产品的设计师是如何做差异化设计的？

两款产品在“加入购物车图标、价格字段、tab选中样式、顶部商品类别区背景”等关键位置都使用了各自的品牌色。在整体视觉表现上，叮咚买菜的品牌色露出率更高，而每日优鲜界面在视觉上更轻量化，这是在品牌表现与视觉效果之间做取舍所产生的结果。仅从视觉角度并不能判断优劣，还有别的吗？我注意到每日优鲜的一个细节：

每日优鲜在商品分类页的图标背景图形做了差异化设计，这一图形本身没有具体的代表意义，也与产品业务没有强关联性，我理解它在基于品牌logo做衍生的差异化设计：在设计中，与首页金刚区图标形成呼应，右上角缺少的这一口与app logo中的缺口也有一定相似度。
相同产品、相同界面，这样的品牌符号即成为每日优鲜的记忆点之一。但由于logo与图标的形状不一致，两者的缺口位置不一致，图标选中时的轮廓描边没有按照该图形刻画，在品牌视觉符号构建、传递上仍有优化空间。

让用户记住我们的产品、品牌，再与心里对产品服务的认可相绑定。当用户下次再有同类需求、或向朋友安利时，会有更高的概率先想到我们的产品。

当然切忌为了差异化而差异化：既然每日优鲜使用了实物风格的图标，叮咚买菜能不能设计3D、毛玻璃、扁平风格的图标？

当然可以，但是适合吗？在生鲜类产品设计中，需要向用户传递食材商品的新鲜感；由于产品的使用用户年龄区间较大，什么样的图标形式是最有利于大部分用户理解的；基于以上两点设计目标的考虑，你认为哪种风格的图标最适合呢？如果一定要基于实物风格再做优化，我想是否可以在用户点击图标时，图标中的食材有一个微动效的展示，让静态的图标以更鲜活的样式展示给用户（仅脑补）。

产品服务差异化在视觉层的表现：在下单界面，叮咚买菜的界面底部展示了平台为用户提供的三项保障权益，缓解用户在线上购买生鲜类产品关心的质量、缺斤少两、配送时长问题。在下单支付前，这一信息让我感受到两个平台提供服务的差异，而我更偏好后者，尽管大概率用不上该保障。

甚至我们需要根据商业目标在界面中适当给到用户引导，引导至商业目标以完成设计为商业服务的目标。

在每日优鲜下单界面中，整个界面在视觉上最突出的是右下角的支付按钮，引导用户支付。在这样的按钮上通常采用引导性更强的文案：去支付、立即支付等。关于储值余额这块区域，如果产品推出充值折扣活动，是否可以在此处展示，在用户即将发生实际购买行为时，将优惠活动推送给用户，引导用户充值+支付，推动用户二次购买，提高用户粘性。
为业务服务：设计符合业务、用户的界面风格
为商业服务：设计结合商业目标，体现差异化
当达到上述4点，我想这个界面应该基本挑不出什么毛病来了，但还有下一个台阶吗？突破口是什么？


3 设计为品牌服务

为什么是品牌？

也许用户只是第一次进入我们的界面，或是第一次在产品中完成购买，站在漫长的用户生命周期过程中，服务用户的不仅仅是某个界面、某个功能：产品经理在努力挖掘、迭代一个更满足用户痛点、需求的功能，交互设计师在努力优化一个流程的用户体验，运营在努力策划活动吸引用户，IT在努力改bug保证产品上线正常运行；用户感知到的是产品组背后努力的集合，但绝大部分用户意识不到也不会去想背后的这些，他们只会把自己的感知与产品、品牌印象相关联，最后以某种印象记住这个产品、品牌、公司，甚至一些平平无奇的品牌压根不会被记住，更不会被提起、复购、安利。

阿里88VIP
你可能会说：将品牌融入设计我也知道，在首页、个人中心、VIP这类界面中可以做结合。但一个产品对用户来说是一个整体，用户途径每一个三四级界面，甚至不常用的密码修改界面，让用户感知到所有的体验都是我们的品牌在服务ta，促进用户对产品的体验记忆、品牌认知。
无论是一二级界面还是一些更深层次界面，在UI设计中都应该带着品牌设计的思维去设计。（并不是建议在每个界面设计中都强调品牌元素的露出，不同级别的界面适合不同方式的品牌露出）

4 设计为传播美服务
综上所述：UI设计为信息、用户体验、业务、商业、品牌服务。
美是一个很难说清的东西，当完成、达到以上标准，再反观设计结果，从界面中会感受到清晰层级的信息所带来美感、优雅而统一的用户体验所带来的美感，根据产品业务定制的独特设计风格所带来的美感、在众多竞品中对比而出的美感，结合商业目标达到增长所带来的美感，打磨融合品牌所带来的美感。
设计为传播美服务，美不是一个结果，它是需要在设计之初，即植入脑海中的像是直觉一样的设计方向。

最后

复习一下「UI设计」菜谱：

为信息服务：设计信息易读性高的界面
为用户体验服务：为用户设计统一、规范体验的界面
为业务服务：设计符合业务、用户的界面风格
为商业服务：设计结合商业目标，体现差异化
为品牌服务：在设计中植入品牌，强化品牌心智
为传播美服务：以美为目标去设计
反思上面列出的菜谱，各个“节点”之间并不像真正菜谱一样有明确的前后顺序，甚至节点之间存在复杂的交集关系，文中层级仅是为了将整个系统结构化得展示出来。不存在任何方法论能够保证设计结果的输出，只有融会贯通，发现明确问题并采用正确的方式去解决，才能无限接近那个期望值。

老戴头：这篇文章的内容架构早在2020年即写好了，我将它使用在自己的实际工作中，并在设计团队中传播。当面对一个设计稿，感觉不对却又不知道哪里不对时，映照以上思路逐一排查，能够结构化、清楚得指出一些问题所在；而在界面设计过程中，依照以上思路能够判断设计侧重点后进行实际操作；在设计评审中也能更全面地输出设计理念、依据。经过一年的迭代，本篇文章所看到的内容是2.0版本，我隐约、肯定得意识到无法穷尽好的设计应有的品质，只好先将阶段性结果分享出来，欢迎指正，分享你的设计信条。

希望本篇文章对你有所帮助～

本文原创，未经作者允许不可转载！
更多内容，欢迎关注作者微信公众号：Underground House！