今日要闻非常感谢站酷平台的邀请，能和前辈@邵飞Design参与本次UI板块的点评活动

五连环画

前言avelinestokart的具体问题可以到我们网站了解一下，也有业内领域专业的客服为您解答问题，为成功合作打下一个良好的开端！

这里附上近期精细点评的8个作品，同时也欢迎其他同学的踊跃参加，我与邵飞老师会尽可能帮助大家做到细节上的指引；






UI设计是一个科学而严谨的工作，掌间的方寸之中，我们要思考在保证界面视觉规范的同时，展现出优秀的视觉设计，还要思考如何让设计更合理的服务好产品与用户；






下面我们从规范、配色、界面层次、设计落地等角度解析一下本次活动收到的一些作品。










作品一







@10作品：伽友






规范层：★☆☆☆☆


视觉层：★☆☆☆☆


产品层：★★☆☆☆






整体点评：


对于在校时期完成的作品，还是值得鼓励的，A品牌周边的探索也值得肯定。


作品在规范层面上做得不是特别好。在UI设计中，一些常见组件的规范要处处遵守，只有做好了每处小细节，最后才会有一个完整规范的产出。


排版、色彩等方面的视觉设计上，可以多看视觉竞品，并进行更多的尝试。






问题总结：界面设计要遵守设计规范和组件规范。






代表性界面点评：













设计规范和组件规范如何落


小小的一个导航栏也会有具体到像素级别的规范，这些点上可以参阅操作系统的规范文档。


















作品二







@野生驯兽师作品：袋鼠理财金融APP设计






规范层：★★☆☆☆


视觉层：★★☆☆☆


产品层：★★☆☆☆






整体点评：


作品在图标等设计细节处都有花心思刻画，并且有自己的想法。


但在规范层面，太多没有深思熟虑的想法，表现在界面中，造成了组件不规范，层级不合理的视觉观感；


视觉设计上，过多的深色和金色的刻画，显得部分界面变得杂乱，影响信息的传达；


产品层面上做了很多细致的分析，但出发点应该更多的从产品和用户的层面思考。






问题总结：界面层级略显凌乱。






代表性界面点评：













如何理解界面的层级


一个扁平的界面，由不同的规范组件构成，这些组件在界面中由于出现的频次、重要程度的不同，在Z轴高度上也略有不同，通过下面的案例可以一起来观察一下：





















作品


@YC作品：MACD






规范层：★★★★☆


视觉层：★★★★☆


产品层：★★★☆☆






整体点评：


作品整体风格统一，视觉设计上也非常出色。


在规范层和视觉层基本没有问题，个别版面的排版问题需要注意，不能为了视觉美观造成版面拥挤，牺牲阅读体验。


同样地，如果是国内的产品，使用英文排版也会显得不落地；


设计最终是要推出市场接受检验的，部分界面要多从用户和产品的出发点思考，要有理有据且避免过分炫技。






问题总结：视觉设计概念化、不落地。






代表性界面点评：













怎么理解分析界面的不落地性呢


界面在视觉上完成度已经比较高时，主要通过服务产品和服务用户两个方面来思考，可以通过下面的案例来一起思考：


大多数成熟优秀的竞品，并不是在视觉上做得十分完美，但是在产品层面上必定是非常优秀的，必定是通过数据检验可以良好服务产品与用户需求的。

















作品四






@M作品：一格APP






规范层：★★★★☆


视觉层：★★★★☆


产品层：★★★☆☆






整体点评：


作品的插图和情感化设计非常亮眼，设计整体感觉相对成熟平稳。


规范层面没有太大问题；视觉上，部分界面要注意版块层级和版块的精细度刻画，如作品中常见的卡片设计；


一些等视觉版块也可以融入更多的视觉技巧，相对而言整个产品比较平整，缺乏视觉亮点；






问题总结：设计细节加工、卡片化设计细节。






代表性界面点评：









怎么应用设计趋势
最近流行的卡片化设计有哪些设计要点，小小卡片有什么门道，我们从形状、投影、色彩来进行分析：

















作品五


@明天出去玩作品：美食星球-美食社交类APP视觉设计






规范层：★★☆☆☆


视觉层：★★★☆☆


产品层：★★★☆☆






整体点评：


作品完成度比较高，运营氛围的营造也还可以。


在规范上，版块内容的字号、间距、高度等规范需要重点注意，各个组件的细节也要进行统一；


视觉上，配图的质量和统一性需要注意，视觉层级的划分上比较凌乱，比如重点版块使用卡片设计而非卡片的滥用；


作品展示中可以多从产品和用户角度进行分析阐述，相信你下一次的作品会更棒～






问题总结：产品配图质量低、不遵守设计规范。






代表性界面点评：













怎么控制图片品质


界面的配图怎样才能好看且合适，下面从配图的落地性、质量、构图比例个方面来梳理：






举例说明：


假如是挂号产品，配图中专家配图的选择就应该是人；


旅游产品的景点描述，配图则要注意色彩清晰度和图片的艺术感；


如果是商品列表，就要保证所有商品的配图，主体明确、空间透视相同














作品六


@丸纸SAMA作品：高品质家具零售定制APP_B+






规范层：★★★☆☆


视觉层：★★★☆☆


产品层：★★☆☆☆






整体点评：


作品的整体风格色彩比较概念化，组件的规范上还需要加强，视觉上虽然偏向于简洁风，但是部分版面缺少产品基础的信息，如没有文案的；


在长图中进行的描述比较细致，但是很多功能点都没有具体展示在界面设计之中；


在分析中可以适当使用方法论，比如产品主打的高品质定制家具，可以通过分析用户画像和情绪板确定产品主色，这样得出的结论会比现在的色彩搭配更加科学合理。






问题总结：产品分析不够严谨、界面不够落地。






代表性界面点评：













如何理解方法论在设计中的应用


善用设计方法论，可以帮助设计师在具体设计上有理有据的进行输出。


如下方例子，金刚区版块图标的重新排版设计，跟据十字交叉分析，最终的结果兼顾了版块盈利和用户需求：

















作品七


@利云作品：便游-APP设计






规范层：★★★★☆


视觉层：★★★★☆


产品层：★★☆☆☆






整体点评：


整个作品清爽简洁，给人一种夏日出行的清新感。


各处规范细节掌握的也比较到位，整体看下来完整度较高。


注意作品中大量的标题字体采用了黑色偏暗红的倾向，看起来有点脏，不符合的产品的气质，可以尝试使用偏蓝色；


视觉基础达标，但是运营设计较薄弱，等设计不完整，氛围并没有展现出来；


产品层面来看，作为旅行一站式的工具化产品，首页展示的功能不全面，旅行各个阶段的痛点解决入口没有妥善呈现，大篇幅的出现了游记等信息是否符合产品的功能定位呢






问题总结：运营设计待加强、产品功能布局待优化。






代表性界面点评：













如何更好地入手


设计如何入手呢


我们可以运用拆分思维，将复杂的版块拆分成若干个组成部分，然后再逐个击破：





















作品八


@大佩琦作品：某地产企业应用-万科生活






规范层：★★★★☆


视觉层：★★★★☆


产品层：★★★☆☆






整体点评：


作品交互合理，排版错落有致，对信息的分类和模块的复用都做得不错。


规范层面基本已问题，注意个别卡片内的信息，排版过于紧凑，字体过小，导致呼吸感较差；


视觉上中规中矩，但对版块与版块间的层级梳理还有待加强，可以着重突出数据版块，弱化部分视觉点缀；


作为管理展示后台，一些功能的分布，以及交互的入口展示可以根据产品需求进一步优化凸显。






问题总结：版块内排版优化、功能交互的梳理优化。






代表性界面点评：









如何理解呼吸感与大小控制


UI设计中任何版块细节的大小呼吸感都十分重要，在具体操作时，有哪些值得注意借鉴的细节点呢下面的图标案例一起来看一下：









感谢阅览


阅读到这里，不妨点赞支持下吧；


同时也希望：同学们多多参与本次的UI点评活动，我们也会尽可能给大家做好指点工作~