优匠科技 详解App开发中的UI设计技巧

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

界面的设计大致需要经过目标人群确定、用户需求调查、交互式流程设计、界面风格定 位功能icon的设计、整体视觉效果的优化和应用icon的设计几个阶段。其中目标人群确定、用户需求调查和交互式流程设计需要软件开发人员和设计人员共同完成。同时，App产品的UI设计需要对相应的功能需求有清晰的把握。

由此，将界面设计的技巧总结如下：

1）页面布局

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

2）颜色和字体

合理的色彩搭配和色彩选取将直接影响整个项目的成功与否，客户的满意度等等，所以在进行美工前，要确定好App的用色标准。一般，重要的颜色不要多于3种，而在这其中又要分为：用于特别强调或者需要重点突出的文字、按钮等小面积使用的色彩；用于普通级信息、文字等信息的通用色彩；和用于标题、列表等比较重要信息的颜色。其中用于背景色和需要弱化显示的信息要用较弱的颜色。

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

3）图标、按钮设计

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

icon设计需要创建的是一套不同尺寸的PNG文件（大小：29*29px～1024*1024px），且需要与应用捆绑。

设计中要善于利用图标语义引导用户行为，设计者可以用象形图形来制作图标，如日历、短信、通讯簿等；也可以用字符来制作图标，如IE浏览器、支付宝的图标；此外还可以用一些抽象的符号来隐喻要代表的应用，当目标人群反复使用和查看这些图标，会普遍认可这些符号的含义。

4）风格的统一

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

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

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

第三，适当使用光照效果。在成套的图标设计中，在弹出框的使用时，可以为这些元素添加一定的光照效果，让他们更加立体化。但在使用光照效果时，要注意保持光照角度的一致性，这样才能保证元素的阴影在屏幕上的朝向是一致的。

小结

随着App应用的普及，软件开发师越来越重视用户体验的效果。因此，在开发中必须要与前端开发、产品经理达成共识，以用户对界面的需求变化为出发点，使用户界面的外在形式和App实际应用的内部功能都能符合不用用户的需求。

————————

优匠科技深耕在互联⽹服务领域多年，拥有几百多家的成功案例与资深的专业技术团队，能够帮助企业解决很多技术上的难题。如有兴趣合作或是产品开发需求的朋友，欢迎前来咨询交流！！