培养你的设计之眼

说到领克（LYNK&CO），爱车的同学应该都知道，其爸爸是吉利，妈妈是沃尔沃，联合开发的汽车，号称是新时代国内高端汽车的代表……

领克很注重设计，采用都市对立美学的设计理念（官方解释：将城市对立的情绪转化为一种审美表达，以自我、尊重、颠覆与深邃四个核心要素呈现出“都市对立美学”设计理念），这种设计理念我也是没怎么明白，呵呵……，具体在车上的表现：都市天际线前脸、能量晶体尾灯、北极之光 LED日 间行车灯。

其实我对这种设计外观、内饰和细节还是蛮喜欢的。不管是线下的领克中心（就是汽车的 4S 店，领克换了个说法罢了），汽车展台设计还是举办的活动，设计风格都是很潮流，很符合像我这样的年轻人的喜欢，呵呵……

但是手机端的 APP 设计的就不尽人意，作为一个资深设计的我来说，简直不敢想象是一个特别注重设计的高端汽车公司设计出来的。

我们以首页为反面教材，一起从整体模块关系、亲密度原则、交互逻辑、设计风格统一性、颜色搭配方面聊一聊领克 APP 界面设计。注意下面测量的数据都是以 2 倍计算的。 

模块关系

界面的模块之间（KV轮播、领克专题和资讯模块）间距没有规律，留白空间过大，疏密度混乱，会给人杂乱无章的感觉。

模块细节

顶部标题栏中的“推荐”和“研究所”文字有点小，且以导航条的形式放在左边，用户可能会误认为是真的导航条，习惯性通过左右滑屏来切换页面，然而领克 APP 并不能通过左右滑屏来切换“推荐”和“研究所”的页面，这就有点尴尬了。如京东 APP中 的发现页面的导航条，用户可以通过左右滑屏来切换页面。

根据苹果官网 iOS 规范，标题栏中用于切换页面的组件叫着分段选择器（Segmented Control），一般放在居中的位置，只支持手指点击切换页面，不支持左右滑屏切换页面。

所以说领克以导航条的形式，也不能支持左右滑屏切换页面，不是优化的交互形式。通过查看研究所页面的内容，个人觉得完全可以把它拿出来放到 KV 下方，原有标题栏下添加一个用户常用的搜索组件，可能更好。

KV 轮播的宽度 750px、高度 666px，这个宽高比例的原因很让人费解（一般常用的图片比例有3：2、4：3、16：9、1：1），如果为了提高 KV 在首屏的占屏比，抓住用户的视觉焦点，可以采用宽高 1：1 会更好一些（毕竟 750：666 也快接近 1：1 了）。这种比例容易构图，也容易表现主次视觉的存在感，同时正方形也会给人一种新颖和时尚的感觉。下图右边是修改后与之前的对比。

1:1 图片比例是传统的 120 胶片画幅，也叫大画幅，导致了胶片为正方形。利用1:1比例更容易将构图归正得更加简单，突出被拍摄物体的存在感。

领克专题模块中的错误就更多了，首先整个模块内的各个元素之间疏密关系没排版好。“查看更多”放在大标题下方，有点像副标题的作用，但是颜色又比较突出，导致权重角色关系不明确，这个结构使得模块标题栏的左右视觉也不平衡。约等于正方形的大图没体现出相应的内容，用户完全没欲望点击，反而占屏比还比较大，有点浪费空间。

还有文字权重等级在整个页面中也没有分配好，如大标题“领克专题“字体大小 40px，“查看更多”和“服务体验 Talk” 字体大小 32px，比首页顶部的标题栏“推荐” 32px 和“研究所” 24px 的字体还大，显然有点不合适。

下图的右边是重新调整后与之前的对比效果，图片大小调整为 16：9。

交互方式

标题栏中也说了，这里再说一下两个相同交互同时出现产生的矛盾。标题栏中有导航，如“推荐”和“研究所”可以通过左右滑屏来切换页面，下方的轮播 KV 也是支持左右滑动切换 KV，当 KV 屏占比大的情况下，不建议两个交互方式同时出现，用户误操作的可能性比较大，也不友好。 

图标设计

首页底部五个 Tab Bar 图标，不管设计和构图有多么创新，至少样式要统一，形式要能表达出内容特征吧。我们来看看这些图标的问题：“活动”图标几乎全圆角，与其他图标的圆角大小不统一。中间“领克”车型图标的描边粗细与其他的四个图标不一样，也没有表现出领克车型的特征。“商城”图标和商品详情页里的“购物车”图标样式重合，不利于用户分辨，增加了认知成本。等等……

诸如此类问题，我们要怎么调整页面底部 Tab Bar 的图标，首先根据自己的设计需求制作个图标绘制模板，目的就不多说了，大家都知道（经常还是能看到很多设计时图方便，不都这一步骤，这样其实是不对啊）。千万记住图标绘制模板不是天下通用的，一定要根据你 APP的风格制定专属的图标绘制模板。

在图标绘制模板里绘制图标，统一描边 3px，统一圆角 4px（注意了，有时由于折角的角度不同，圆角的大小也要微调，保证视觉上统一），这样绘制出来的图标基本能保证风格的统一性。还有最重要的一点，图形一定要表达出内容的特征。

还有，我发现某个功能图标会有多个图形样式，如领克专题模块中的 next 图标样式、商城页面的精选系列和我的页面列表中的 next 图标、研究所页面和其他内页返回图标等，明显是欠考虑的设计。

资讯图片下方的点赞、评论、分享图标描边粗细也不一样，分享的图标描边明显比其他两个粗，等等问题……

配色

领克 APP 有点类似暗黑模式的配色，用这深色模式我想领克可能是为了表达品牌属性，潮流、高端、安全、科技等。可惜没能注意配色细节，导致最终效果没到达预期效果。首先顶部导航栏底色用了纯黑，文字用了纯白。这个搭配对人的眼睛刺激很大，不柔和，增加眼睛的疲劳感。

根据文字配色的基本原则（Eye Strain）：纯白背景不要配纯黑字色，黑色背景不要配纯白字色，因为这两种方式都会增大眼疲劳。解决方法是用“浅灰”替换纯白；或“浅黑”替换纯黑。这样可以降低眼疲劳，阅读感会更加舒适。下图实验对比，上部分是纯色的，下部分调整了亮度，大家感受一下。

是不是调整后的下部分文字会比上部分纯黑白的好舒服很多呢？那就让我们具体说说暗黑模式的配色技巧吧！

在我们设计 UI 界面时，常用的文字配色值（#333333、#666666、#999999、#CCCCCC），也被大家称作万能的文字配色的来历或者逻辑是什么吗？

先来认识一下 HSB 色彩模式：以人类对颜色的感觉为基础，描述了颜色的三种基本特性。

• H：色度，用于调整颜色，范围在0~360度之间，按照角度值标识。比如红是0°、橙色是30°等；

• S：饱和度，是指颜色的强度或纯度，用从0%(灰色)~100%(完全饱和)的百分比来度量；

• B：亮度，是颜色的明暗程度，通常是从0%(黑)~100%(白)的百分比来度量。

我们用 HSB 色彩模式来看看#333333、#666666、#999999、#CCCCCC 色彩关系。会发现它们的亮度值分别是 20、40、60、80 依次相差 20。

我们通过 HSB 色彩模式调整亮度值进行配色是不是更方便了。下面是重新搭配的颜色值：

总结

说的这些只是一些设计方法，不仅可以对领克 APP 的界面做调整和重设，对你以后设计 UI 时也有些借鉴。总之，只有注重每个细节，才有可能产出高品质设计。没有捷径，唯有多看、多做、多想，把别人好的设计方法和理论归纳总结后运用到自己的设计中去，也要总结那些不好的设计，避免自己今后犯同样的错误，这样才有进步。

如果文章中的某些方法对你有帮助，麻烦给一个“赞”，也希望后期迭代的领克 APP 越来越好……