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

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

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

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

1、我对UI设计的定义

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

1、我对UI设计的定义

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

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

稍微延伸一下,早在屏幕型界面出现前,UI设计即存在了,只是那时还没有这个名称:
写给自己的UI设计「菜谱」2.0-哇拍
以前的报纸排版,一张A2大小的报纸有非常多的内容需要展示。不同用户关注的内容也不同:新闻时事、招聘信息、小说图文等等;因此在排版中运用字体大小、颜色、辅助图形、图案等形式,将复杂的信息布局排版,帮助用户快速找到自己想看的内容。
有没有一种似曾相识的感觉?其实UI设计师在做的就是将需求中要展示的信息内容,在规定界面中进行样式设计,使之能够高效传递给用户。设计本质是一致的,只是信息展示载体在变化,以前是报纸,现在是屏幕界面,以后可能是新的东西。

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

前面说:设计从需求出发,为需求目标服务,那么UI设计在为什么服务?

我总结出六个服务对象,通过服务对象的要求推导出对设计的要求,并对它们进行排序分为以下四层,接下来一一讲解:
写给自己的UI设计「菜谱」2.0-哇拍
1-1 设计为信息服务

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

什么叫信息易读?

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

下面举个
写给自己的UI设计「菜谱」2.0-哇拍
上图展示了两个APP购买火车票的界面截图,当你国庆节前准备购买回家车票时,你更愿意使用哪个?如果你是一位设计师,可能你会觉得A界面像原型,B界面像设计效果图?
为什么会这样?抛开美观角度,我来讲讲我看到的:
信息布局设计:如果是一篇小说,我们仅需根据分段,从上至下进行布局即符合用户的阅读顺序;但如果界面中的信息变得复杂,且之间有不同的关联关系,那么我们需要重新设计信息布局,帮助用户更好地理解、获取信息。
写给自己的UI设计「菜谱」2.0-哇拍
A界面中,能感觉到在界面设计中有意识地将相关联的信息放得近一些,但信息基本按照栅格布局,例如出发时间与出发站之间在视觉上并没有强关联;B界面则将这两个信息根据相近性原则做了布局处理,并将历经时间、车次放在两个时间中间,以简单的图形来表达从出发站抵达目的站。
也许你喜欢极简,但在处理复杂信息时,比起平铺直述,我们要学会玩点“花样”。但切忌画蛇添足,花样过度,抢了主要信息的风头。
写给自己的UI设计「菜谱」2.0-哇拍
A界面座位信息中,座位名称与座位数量之间间距过远,导致在视觉上很难将两个信息强关联起来,用户每次需要从左看到右,跨越1/3屏宽才能阅读完;而B界面利用横向布局,很好地解决了这个问题。
甚至用户可以根据座位信息的横向布局记忆,优先查看自己预期的座位信息。例如用户C通常出行选择更舒适的商务座,那么他在找到合适时间的列车班次后,即可以直接先查看位于“目的站”下方的“商务座数量”,如果卖完了,再向左查看其他座位情况。
另外,可以注意到B界面“座位信息”中“二等座:有票”中使用了英文冒号,它所占的字符宽度比中文冒号更短。让相关联的信息间距更近,这些都是在设计时需要注意到的细节。

信息层级设计:UI设计并不是将所有的信息平铺在界面中,而是根据用户的关注优先级、阅读顺序等,对它们进行差异化设计表现。有时候还真得区别对待。
写给自己的UI设计「菜谱」2.0-哇拍
A界面整体信息在视觉上较平,班次信息和座位信息在字体大小、颜色等视觉表现上基本为平级,这需要用户自己调整注意力,去找自己想看的信息;B界面则更突出班次信息,弱化座位信息,以视觉上的对比为用户设计注意力流动顺序。站在用户在购票过程中以时间为第一优先级的角度,B界面的信息层级更符合用户的阅读顺序。
尽管A、B界面都对时间、价格两个重要信息做了突出处理,但B界面采用了特殊数字字体,和其他系统字体有所区别,让数字的识别度更高。

界面信息展示效率:尽管近几年智能手机屏幕相比iPhone4已经大了不少,但手机一屏能展示的内容还是稀土寸金,用户在界面中停留的时间、注意力也同样稀土寸金,在UI设计中请站在产品角度把屏幕空间高效利用起来,切忌浪费。
写给自己的UI设计「菜谱」2.0-哇拍
A界面中,班次信息与座位信息为左右布局,可以观察到卡片左下方、右侧有较大空余空间;而B界面为上下布局,较为合理地利用卡片空间;在不影响用户阅读的前提下,同样展示三个车次信息,B界面所占界面高度更小,相同屏幕下的信息展示效率更高。

信息可视化设计:信息可视化并不是为了好看、炫酷而故意设计好看的图表,而是站在用户角度,将界面中的信息翻译成用户更容易读懂的形式。从而提高用户的信息获取效率,提升用户体验。
写给自己的UI设计「菜谱」2.0-哇拍
价格的展示:AB界面中关于价格的展示,全都将“价格”字段在前端翻译为“¥”符号,这样的设计在不影响用户理解成本的前提下,有效降低了界面的信息复杂度。

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

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


1-2 设计为用户体验服务

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

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

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


2-1 设计为业务服务
我喜欢在逛商场时观察每家店铺独特的装修风格,商场里有各式各样的店铺:餐饮类、珠宝类、化妆品类、娱乐类、服饰类等等,每家店铺在装修中都会结合自身品牌定位、服务品类调性做针对性的设计:
写给自己的UI设计「菜谱」2.0-哇拍
上图中,珠宝类店铺设计得更明亮、高级、精致,它想让店里的珠宝看上去更昂贵,让消费者认为这些珠宝值这个价格;而咖啡类店铺则会设计突出品质感、生活感,它想让这里的咖啡看上去更有品质,让消费者觉得逛街累了坐在这里喝一杯咖啡聊聊天挺舒服的。
钻戒还是那个钻戒,咖啡还是那个咖啡,为什么需要做这些事情?不能安安静静做好产品吗?我认为影响消费者进店、到最后购买产品,除了产品本身因素,一家店给到消费者整体的体验起到巨大的作用:从消费者远处看到店面的第一印象、走店后收到店员服务的体验、试用产品时的体验、商品价格以及是否有活动折扣、网上对这家店的评价、朋友是否推荐等等一切因素,都将成为消费者转化消费的决策依据。
有诸多因素,店铺装修风格起什么用?简而言之,装修就是为了给消费者营造一种氛围,更符合消费者对该店铺产品、服务体验预期的氛围,就这么简单。
写给自己的UI设计「菜谱」2.0-哇拍
回观上图,你是否发现尽管每个店铺装修风格各异,但它们都非常规则得出现在商场对应店面以内,以店铺门面为起点,是否联想到挤在手机方形界面里的无数app界面。互联网仅是将越来越多现实世界中的服务线上化。
写给自己的UI设计「菜谱」2.0-哇拍
把App Store比作一个商场,那么App们即是开在商场里的店铺,有的店铺负责供用户娱乐,有的店铺供用户购物、出行、社交、餐饮等不同的需求。UI设计师就像是一家店铺的空间设计师,大到店铺风格基调,小到地砖尺寸都要精心设计,让店铺/APP风格符合用户对产品、业务、服务体验的预期。说得直白一点:你能不能让你们卖500块的会员看上去真的值1000块,让你们卖的咖啡看上去是同价位里最高端、咖啡豆最优质的咖啡,让用户觉得自己捡到了便宜。
尽管我们遇到的近乎所有界面都是由文本、图形图案、间距、色彩等组合而成。正因为不同产品、业务调性不同,目标用户不同,同个用户对不同品类产品的预期也不同,于是衍生出多种设计风格:
写给自己的UI设计「菜谱」2.0-哇拍
例如儿童教育类的产品通常界面设计得更活泼、亲切。金融类产品更专业、精致,音乐类产品更具调性、设计感。
写给自己的UI设计「菜谱」2.0-哇拍
有时候就算是相同行业的产品也会因为用户群体、产品定位等因素不同,产生完全不同的设计风格。
在虚拟的互联网产品中,我们无法像实体门店传达给用户视听触嗅味觉等全方面体验,我们的界面仅存在于一块发光面板上,为了更好得服务用户,尽可能让用户有身临其境的体验,我们应该为用户提供符合业务属性、产品定位、目标用户预期的界面风格设计,来传递我们的理念、品质与调性。
看到这,你也许会问:这有什么用?
当同样一枚戒指以同样的价格出现在商场专柜和便利店的橱窗里,你更愿意购买哪一个?

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

2-2 设计为商业服务

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

下面再举个
写给自己的UI设计「菜谱」2.0-哇拍

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

两款产品在“加入购物车图标、价格字段、tab选中样式、顶部商品类别区背景”等关键位置都使用了各自的品牌色。在整体视觉表现上,叮咚买菜的品牌色露出率更高,而每日优鲜界面在视觉上更轻量化,这是在品牌表现与视觉效果之间做取舍所产生的结果。仅从视觉角度并不能判断优劣,还有别的吗?我注意到每日优鲜的一个细节:
写给自己的UI设计「菜谱」2.0-哇拍
每日优鲜在商品分类页的图标背景图形做了差异化设计,这一图形本身没有具体的代表意义,也与产品业务没有强关联性,我理解它在基于品牌logo做衍生的差异化设计:在设计中,与首页金刚区图标形成呼应,右上角缺少的这一口与app logo中的缺口也有一定相似度。
相同产品、相同界面,这样的品牌符号即成为每日优鲜的记忆点之一。但由于logo与图标的形状不一致,两者的缺口位置不一致,图标选中时的轮廓描边没有按照该图形刻画,在品牌视觉符号构建、传递上仍有优化空间。

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

当然切忌为了差异化而差异化:既然每日优鲜使用了实物风格的图标,叮咚买菜能不能设计3D、毛玻璃、扁平风格的图标?
写给自己的UI设计「菜谱」2.0-哇拍
当然可以,但是适合吗?在生鲜类产品设计中,需要向用户传递食材商品的新鲜感;由于产品的使用用户年龄区间较大,什么样的图标形式是最有利于大部分用户理解的;基于以上两点设计目标的考虑,你认为哪种风格的图标最适合呢?如果一定要基于实物风格再做优化,我想是否可以在用户点击图标时,图标中的食材有一个微动效的展示,让静态的图标以更鲜活的样式展示给用户(仅脑补)。
写给自己的UI设计「菜谱」2.0-哇拍
产品服务差异化在视觉层的表现:在下单界面,叮咚买菜的界面底部展示了平台为用户提供的三项保障权益,缓解用户在线上购买生鲜类产品关心的质量、缺斤少两、配送时长问题。在下单支付前,这一信息让我感受到两个平台提供服务的差异,而我更偏好后者,尽管大概率用不上该保障。

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

3 设计为品牌服务

为什么是品牌?

也许用户只是第一次进入我们的界面,或是第一次在产品中完成购买,站在漫长的用户生命周期过程中,服务用户的不仅仅是某个界面、某个功能:产品经理在努力挖掘、迭代一个更满足用户痛点、需求的功能,交互设计师在努力优化一个流程的用户体验,运营在努力策划活动吸引用户,IT在努力改bug保证产品上线正常运行;用户感知到的是产品组背后努力的集合,但绝大部分用户意识不到也不会去想背后的这些,他们只会把自己的感知与产品、品牌印象相关联,最后以某种印象记住这个产品、品牌、公司,甚至一些平平无奇的品牌压根不会被记住,更不会被提起、复购、安利。
写给自己的UI设计「菜谱」2.0-哇拍
阿里88VIP
你可能会说:将品牌融入设计我也知道,在首页、个人中心、VIP这类界面中可以做结合。但一个产品对用户来说是一个整体,用户途径每一个三四级界面,甚至不常用的密码修改界面,让用户感知到所有的体验都是我们的品牌在服务ta,促进用户对产品的体验记忆、品牌认知。
无论是一二级界面还是一些更深层次界面,在UI设计中都应该带着品牌设计的思维去设计。(并不是建议在每个界面设计中都强调品牌元素的露出,不同级别的界面适合不同方式的品牌露出)


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


最后

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

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

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

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

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