UI设计评判标准-自省用-小白用

产品经理问我：“怎么样判定一套UI设计是好设计”，脑子里顿时很多词汇蹦了出来，判定形式很多，颜色啊字体啊什么的，还有交互相关。细枝庞杂，但是仔细整理思考还是能理出线的。所以有了这篇文章，文字直白易懂，每一个都有一个正反例子，就算小白，外行人事也可以从中了解一些东西。

作者不是知名人士，只是把这些想法总结出来，不为教育，仅为了给予你们一些灵感或感悟。如果达到了，那就很开心了。言归正传

《UI设计评判标准》

一 色彩

a. 色彩与APP内容相关性

不同的色调能调动不同的情绪，给予不通的反应，使用的主色彩需要让品牌色符合内容调性，这是非常重要的部分，以下是我找到的一张颜色性格图，不一定完全正确，仅参考作用。

b. 色彩舒适度（颜色搭配是否好看）

同样使用的紫红配橙色，下图左边色彩太刺眼不舒服。颜色搭配不好看，右边就舒适很多，所以色彩搭配是很重要的，色感差的人可以找一些色彩搭配网站做借鉴噢~或者有好看的图，自动帮你分析色彩搭配的网站也有很多，搜一下就有，也是有帮助的。

二 文字

a.字体大小是否合适

下图左边下面3个Tab文字太小，英文字体几乎看不清了，右边明显字是易读的，字与ICON的比列也是协调一致的

b. 排版问题，相关的内容尽量排到一起

左图职位太分散影响阅读，整个视觉线是凌乱的，你不知道你的视线下一部到底是看向左边还是右边，上边还是下边。右边的招聘海报视觉线是从上到下的，职位都摆到了一起，根据内容的重要性，职位类别和具体职位，还用字号大小，字体粗细，字体颜色做了区分。再回头看左边的图，虽然也做了大的区分，但是做到的还远远不够，非你不可，你在哪里，到底谁才是重头戏，设计者也搞不清，读者更加分不清了(*>﹏<*)

三 UI识别性

a.界面是否好看

这个涉及到的问题就是设计功底问题了，下面两个界面都是不错的，但还是有好与更好的区别，都在细节上。

a, 搜索栏背景图，拉勾APP给予了将近1/3的版面，下面不仅可以做内容运营，而且用的图标都是与求职密切相关的简历图标设计，再回头看看智联，画蛇添足的弧形处理，没意义的设计还不如不做，后面的图是大城市剪影，用了云朵搭配，也许是地平线的意思？智联的用户主要集中在大城市？一脸蒙逼……这么小的空间，太满，有累感

b, 线的运用， 智联的LOGO被灰色圆圈包住，内容区分线几乎从左至右都满了。右图，线仅从职位名的垂直方向开始，而且你再仔细看的话你会发现，线的颜色也比左边更浅，做了弱化的处理

c, 还有一些细节，你们可以自己找找，我就不多说了~

b. UI风格，是否能在同类产品中脱颖而出？

walk up在运动类APP中设计独树一帜，需要强力的团队与设计师~,这个APP带音效，打开比较舒缓那种，让人放松，用户体验上是花了真心思

c.内容与UI风格搭调

运动类APP，蓝色理智而冷静，更加适合科技类理性的APP，所以还是需要慎重选择的

四 交互细节

a.触摸控制范围

面积不能太小，否则很难点到哦~

b.易于阅读的布局

招聘岗位中，左边那张图岗位的摆放不易阅读，没有对齐的一个点，像起房子铺的红砖，一个插一个，红砖还好，有规律，起码人家长度一样，( ╯□╰ )

c.视觉中心控制

不能太繁杂喧闹影响视觉走线，左边明显很混乱，ICON和下面标题抢眼睛，有种走入菜市场的感觉~右边给的感觉就是高档超市

五 细节

a.防止拉伸

这是基本的素质与要求

b.控制字间距行间距

大家一目了然了，左边明显太紧了

六 设计与实现效果

a.开发效果与原稿接近，看不出区别

b. 不同设备上依旧保持着与原稿相同的效果（提防类似iphone4s,与iphone6plus，之类的）

需要设计师童鞋和开发的共同努力~

从下图可以看出圈里面比例和原稿不同，下面TAB字与图标距离也不相同

OK，大体上就到这里了，其实深究的话还有很多点，可以继续深入和挖掘

谢谢各位~