- 动静有法 Sketch+Principle UI设计基础教程
- 张怡琪(张小碗儿)编著
- 703字
- 2025-02-16 00:37:43
1.2.3 界面设计
确认高保真原型图后,要根据它绘制产品设计稿,整体设计稿里包含图标(icon)设计、主界面设计、二级界面设计、闪屏页设计、活动页设计等。
产品的设计风格主要通过启动图标和主界面传达给用户,是产品给用户的第一印象,排版布局、配色、配图等都要遵循统一的设计风格。因此,要先确定整体设计风格。
例如,打开衣柜选择出门要穿的衣服时,首先要考虑穿着风格,是运动风、淑女风、嘻哈风还是办公室风格,并根据已选好的风格搭配自己的上衣、裤子、鞋、帽子等。不能一身运动风服装,搭配一双职场风格的高跟鞋。
在设计的时候,必须遵循为产品服务的原则。UI设计是偏理性的行业,和艺术家不同,想画什么就画什么。每个界面的布局、每个按钮的颜色,以及每个功能图标的绘制,都要考虑用户在操作的时候是否合理、是否人性化,不要因为设计造成用户在产品体验上的困扰。

支付宝App界面整体为扁平风格,主色调为蓝色(支付宝的品牌色),显得干净、清爽,给人一种安全、可信赖的感觉。作为一个用户经常使用的App,它的启动图标在众多图标当中很容易被识别。主界面当中各个功能图标的设计遵循统一的风格,而且让用户在单独看图形不看文字的前提下,就可以快速地分辨出各个按钮的功能和含义。用户可以很快地在主界面中找到自己常用的功能。

(图片来源于支付宝App界面)
美团外卖App的启动图标是一个小袋鼠,象征美团配送的时效性。人们经常能见到这个袋鼠形象,比如,外卖小哥的衣服上、安全帽上、外卖箱子上等。它的识别度很高,所以大家一看到这个启动图标,就能想到美团外卖。美团外卖App界面的整体色调也选择和小袋鼠一样的颜色,并且首页搭配美食图片,让用户一打开应用就有点餐的欲望。

(图片来源于美团外卖App界面)