app设计是一个看似简单其实复杂的事情,欧博每一个部件的设计都有一定的规范和设计思路可寻。
app设计,也就是我们常说的手机应用程序的界面设计。
如今手机已成为我们生活工作密不可分的一个工具,各行业各类型的app层出不穷。
经过几年的发展逐渐成熟,也逐渐形成一些普适的设计规范,包括布局、各部件尺寸、字体运用等等。虽然说设计要创新,不能一成不变,但考虑到用户的使用习惯,提高用户体验感,在一些趋于统一的问题上遵循一定的规范,才能使我们的app产品更具推广性和适用性。
不是谁都有能力成为一个行业的引领者,特别是作为行业新手,更应熟知一些规范,然后在遵循规范的同时慢慢学会灵活变通,赋予产品特色,提高其用户辨识度,直到独具一格。
下面我将就app设计工作涉及到的界面设计、部件设计、交互体验、视觉提升等方面的内容进行整理总结,欧博娱乐把认为比较重要的点以及其他需要补充的点着重记录和分享。
一、app界面常用设计规范
app界面的设计规范,这里的界面设计不是说视觉效果上的美化设计,而是一些如尺寸、间距、布局、比例、适配性方面的设计规范。虽然乍看都是小细节的东西,但作为一个合格的UI设计师,就是要在纠结每个像素单位的过程中练成像素眼来打造出一个合格的界面产品,差一点也许一般人分辨不出来,但一定会不同程度影响到一款产品的设计专业度,进而影响用户体验。
一篇酷友的整理蛮全面的,https://www.zcool.com.cn/article/ZNjQ0NjQw.html,推荐认真学习收藏一下,特别是新手设计师,在刚上手一下子手足无措时,可以直接借鉴。
内容包括:
界面设计尺寸及栏高度
边距和间距
内容布局
界面图片设计比例
建立统一风格的图标
APP版式设计规范
界面文字设计规范
设计适配
切图规范
设计稿标注
部分要点:
01.关于设计稿尺寸选择问题(包括iphoneX)
能一稿多版本适用肯定是最好的,而且现在有很多实用的切图工具帮助我们解决了很多适配的问题。
iphoneX出现以后,许多渲染图都以IphoneX作为展示模板,效果很具沉浸性,app界面展现更具魅力,但由于比例发生变化,那设计稿肯定也要相应调整。
很多设计师都是习惯用750*1334作为设计尺寸。这个中间尺寸向下可以适配640x1136px,向上可以适配1242x2208px和750x1624px/1125x2436px。
关于倍率、分辨率问题,估计还是有很多设计师是了解的云里雾里的,那又应该以什么设计尺寸来适配热门的iphoneX呢。
对于习惯使用750*1334的设计师来说,iphoneX设计的时候我们依然可以采用熟悉的尺寸作为模板,只是高度增加了290px,设计尺寸为750*1624(@2x)。
但要特别注意:状态栏的高度要由原来的40px变成了88px,另外底部要预留68px的主页指示器的位置。
对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。
但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
02.关于界面中各种栏(状态栏、导航栏、标签栏、工具栏)的高度尺寸规定
iOS严格规定了各个栏的高度,这个是必须遵守的。
03.关于界面图片比例
其实关于图片的比例并没有个很统一的规范,可能有些设计师也是凭感觉或者通过借鉴行业知名APP的尺寸来进行设计。但其实可以有更科学的方法来进行自主尺寸确定。
常见的图片尺寸有16:9、4:3、3:2、2:1、1:1和1:0.618(黄金比例)等。
这些比例不无根据,如16:9 是根据人体工程学的研究,发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形,4:3 是勾三股四弦五,在摄影中非常常见。
科学研究出的比例自然有其自然道理,无论在什么行业都可能发挥作用,所以了解了这个方法将非常实用,以后再进行尺寸选择时不再盲目,可以根据自己的设计需求自行确定图片的具体尺寸。(但数字要选相近的偶数)
04.关于字体使用规范
APP中字号范围一般在20-36之间(@2x),所有的字号设置都必须为偶数,上下级内容字号极差关系为2-4号。
字体的颜色设置一般很少用纯黑色,一般用深灰色和浅灰色、细体和粗体(注意要用字体本身的字重,不能用PS的加粗功能)来区分重要信息和次要信息,进行信息层级的划分。
05.内部设计
1、所有能点击的图片不得小于44px(Retina需要88px)
2、单独存在的部件必须是双数尺寸
3、两倍图以@2x作为命名后缀
4、充分考虑每个控制按钮在4中状态下的样式
安卓系统各手机版本标准总体不够统一,通过按IOS标准设计的界面,也能较好适配大部分安卓系统界面。
但还是需具体情况具体分析,安卓界面的设计规范可以了解下https://www.25xt.com/android链接中的内容。
其他参考:
https://www.25xt.com/screen/ios.html
https://www.baidu.com/link?url=3WHQETATtUHDS77eal0B6imb-VYogTkS7WOUe2LDiuEf2VAi6PXbuPhmI_6vf4SzIgbZ6LeG0xM6OuaQJqrn4a&wd=&eqid=a45158200000162b000000065b99c04b
https://www.baidu.com/link?url=2SU6Fbaq_i4a1MkXyfT7b4pgS67pxqkUaMuYQneWNNqigUPWG6BOGDi_ksnuWZeI&wd=&eqid=b03a54980000bd55000000065b99c783