app图标圆角角度_APP开发中的UI设计!

APP的完整设计包括编码和UI设计,而UI设计往往被忽视但至关重要。良好的界面设计需经过目标人群确定、用户需求调查、交互流程设计、界面风格定位等多个阶段。设计时要考虑不同平台的适配,采用用户熟悉的界面风格,合理搭配色彩,明确字体层级,设计简洁形象的功能icon,并确保整体风格一致。色彩、字体和icon设计都是影响用户体验的关键因素。
摘要由CSDN通过智能技术生成

f6044f04a34e3fe77f88df470621090d.gif

e1ec3e2a15fc1169f402bc97e3176d91.gif

5d1233fc370d1f78f66c65d01134a867.png

文/张欣悦

完整的APP设计由编码设计与UI设计构成。长期以来,开发者都重视功能的开发而忽略了UI的设计,导致很多实用性很强的APP用户下载安装后不会用,或者觉得操作复杂不好用。由此,界面设计慢慢被互联网企业所重视,认为界面设计也是产品的重要卖点。776bdf36c42e84a3fd51da99af61c0f2.png

界面的设计大致需要经过目标人群确定、用户需求调查交互式流程设计、界面风格定位功能icon的设计、整体视觉效果的优化和应用icon的设计几个阶段。785fe49a1ede00267e31f22a50a3e6fc.png

其中目标人群确定、用户需求调查和交互式流程设计需要软件开发人员和设计人员共同完成。同时,App产品的UI设计需要对相应的功能需求有清晰的把握。由此,将界面设计的技巧总结如下:11504022f9b0d317083bd1abf3feabe1.png

2e4333f99bc17e64d84a6a6f93c95428.gif

在开发前期进行APP的原型设计,针对 Android和ios制定不同的输出规范,而在页面布局时则可尽量兼顾 Android系统和ios系统,在后期经过微调后输出适用安卓和ios不同的尺寸要求即可。同时,针对目标人群要尽量使用用户熟悉的界面风格,方便用户按照以往的使用习惯来操作软件,这样更容易让用户接受。如果设计得过于另类,则可能会很难符合大众口味,而不被大众接受。14943a98d22663fd12c3899a6cd1acd9.png

2825a4564c5f3fdaa16bc7124507839b.gif

合理的色彩搭配和色彩选取将直接影响整个项目的成功与否,客户的满意度等等,所以在进行设计前,要确定好APP的用色标准。285422d5456251fb459f2228a9b00b11.png

一般重要的颜色不要多于3种,而在这其中又要分为:用于特别强调或者需要重点突出的文字、按钮等小面积使用的色彩;用于普通级信息、文字等信息的通用色彩;和用于标题、列表等比较重要信息的颜色。其中用于背景色和需要弱化显示的信息要用较弱的颜色。e02c9a8a2e38d6e305f0a42fb885fd29.png

针对字体也要分为重要字体、较重要字体和一般字体,根据文字信息的重要性来确定文字的字体和字号。其中重要的文字一般为大标题、导航栏;较重要的文字为二级页面小标题、栏目标题等;一般字体为普通正文文字和说明性文字。在字体字号选择时,还可以结合其相应的背景色来选择,运用色彩的搭配太突出显示或者弱化显示相应的文字。920b1ef3679e28c3e6f426e2e6dde5a3.png

ff66896251aa2fff830c29923fe58e7f.gif

功能icon是在APP中用来表达某一操作或者功能示意的图形,如主页、设置等功能能图标。功能图标的设计应当尽可能的形象、简洁,力求能准确的表达其代表的功能。而针对应用icon的设计要在界面设计的最后再进行,便于让icon与整体界面的风格相匹配。同时,还需要输出不同尺寸的应用到界面上。f07851b15e070e5e5c5f885975b16a41.png

icon设计需要创建的是一套不同尺寸的PNG文件,且需要与应用捆绑。设计中要善于利用图标语义引导用户行为,设计师可以用象形图形来制作图标,如日历、短信、通讯簿等;也可以用字符来制作图标;此外还可以用一些抽象的符号来隐喻代表应用。985174f91f399cf61f1e17e11f579fe1.png

09a75e99d085e6aa1bd0763a17c0ef2b.gif

在界面设计前,要对界面进行风格定位,让界面的整体风格符合视觉流程,符合目标人群的偏好。2582882c71db257cf63de55e9ab5b8c7.png

第一,统一界面各个元素间的间距。正文的行间距、按钮与按钮之间的距离、栏目标题与正文之间的距离、导航与栏目之间的距离,都需要进行统一,这样能使界面整洁清晰、条理清楚。f568ed7c96c666f2b77801099486525b.png

第二,善于使用用圆角效果。在APP应用中,通常会有按钮、弹出的信息提示框等必要元素,而这些必要元素通常会设计成各种大小不一的矩形。我们可以为矩形设计圆角效果,统一矩形的圆角像素来软化用户界面,并形成统一风格。9eb4a98a8dec11bf3bb11625fff7d9c4.png

第三,适当使用光照效果。在成套的图标设计中,在弹出框的使用时,可以为这些元素添加一定的光照效果,让他们更加立体化。但在使用光照效果时,要注意保持光照角度的一致性,这样才能保证元素的阴影在屏幕上的朝向是一致的。推荐阅读:APP设计中的交互动画!e58aa89e23925bd469bd59c8f3eb7748.pnga6372df8bf18fff5b604490d8d2e6172.png96c4d135e8692332a099482e668c8265.pngc3751bc41ab1fe393e623cfd4f1aca4c.gif

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值