高手坐堂 UI作品点评(上)Homepage recommendation
3年前Publish
29433
|
56
|
954
非常感谢站酷平台的邀请,能和前辈@邵飞Design参与本次UI板块的活动点评

前言

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


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


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



作品一


@vvan10   作品名:伽友


规范层:★☆☆☆☆

视觉层:★☆☆☆☆

产品层:★★☆☆☆


整体点评:

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

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

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


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


代表性界面点评:



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

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





作品二


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


规范层:★★☆☆☆

视觉层:★★☆☆☆

产品层:★★☆☆☆


整体点评:

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

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

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

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


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


代表性界面点评:



如何理解界面的层级?

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





作品三

@YiiChang   作品名:ii Movies App Concept Design


规范层:★★★★☆

视觉层:★★★★☆

产品层:★★★☆☆


整体点评:

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

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

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

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


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


代表性界面点评:



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

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

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




作品四

@Mooguer   作品名:一格网APP


规范层:★★★★☆

视觉层:★★★★☆

产品层:★★★☆☆


整体点评:

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

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

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


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


代表性界面点评:


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




作品五

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


规范层:★★☆☆☆

视觉层:★★★☆☆

产品层:★★★☆☆


整体点评:

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

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

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

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


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


代表性界面点评:



怎么控制图片品质?

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


举例说明:

假如是挂号产品,配图中专家配图的选择就应该是中国人;

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

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




作品六

@丸纸SAMA   作品名:高品质家具零售定制APP_Buy+ 


规范层:★★★☆☆

视觉层:★★★☆☆

产品层:★★☆☆☆


整体点评:

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

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

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


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


代表性界面点评:



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

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

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




作品七

@利云designer   作品名:便游-APP设计


规范层:★★★★☆

视觉层:★★★★☆

产品层:★★☆☆☆


整体点评:

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

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

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

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

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


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


代表性界面点评:



如何更好地入手banner?

banner设计如何入手呢?

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





作品八

@大pig佩琦   作品名:某地产企业应用app-万科e生活


规范层:★★★★☆

视觉层:★★★★☆

产品层:★★★☆☆


整体点评:

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

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

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

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


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


代表性界面点评:


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

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


感谢阅览

阅读到这里,不妨点赞支持下吧;

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

954
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
北京 | UI设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹