请选择 进入手机版 | 继续访问电脑版

【设计篇】在界面设计中新手不知道的那些事系列(四)

发表于 01-12 17:14 显示全部楼层 16 172

设计规范是UI设计师心中的瞭望塔!

 

在几篇的文章中我一直都在提到一个概念就是设计规范,也说明了设计规范的来源以及它的作用,那么接下来就是如何去制定一套设计规范?

 

这里首先声明一下:制作设计规范之前,首先通过制作基本页面,来确定整体UI界面的风格,然后制定设计规范。所以规范并不是一开始就有的,而是随着页面的制作,风格的确定,在设计师心中慢慢形成的一套规范。

 

另外给大家普及一下基础知识:

 

设计稿应该采用多大的呢?

手机市场上有两种手机:苹果 安卓,分别是iOS操作系统 和 安卓操作系统。

 

随着苹果手机的更新换代,目前有一下几种流行的设备尺寸

苹果主流设备型号及尺寸

iPhone5

640x1136 px

iPhone6、iPhone7、iPhone8

750x1334 px

iPhone6 PlusiPhone7 Plus、iPhonePlus

1080x1920 px

iPhone X

2436×1125 px

 

安卓系统由于是开源的代码,导致了市场上出现了各种各样的安卓设备,型号比较复杂,但主流的设备大小有一下三种

安卓设备主流尺寸

hdpi

480x800 px

xhpi

720x1280 px

xxhdpi

1080x1920 px

 

我们在设计APP的时候,当然不能每个尺寸大小的设计稿都设计一个,只需要设计一个尺寸就可以了。

 

之所以他们可以采用一个设计稿,经过研究它们发现,采用iPhone6的设计尺寸 750X1334的设计稿,可以同时适配到其它所有的设备,包括安卓机,我们做的时候只需要按照安卓和iOS的命名规则切图即可。

 

值得一提的是最近苹果刚出的iPhone X ,也可以通过iPhone6的尺寸大小进行适配。

iPhone6的尺寸只需要把状态栏高度提高48px,标签栏高度提高68px,内容区域增加18px,总共是提高134px,也就是说iPhoneX的设计稿大小@2x是750x1468px,切图时要切@3x,既是三倍图;

 

视觉设计规范包括的内容有哪些?

 

在确定屏幕的尺寸大小之后,接下来就是在750屏幕宽度的情况下开始设计相应的界面。既然大家明白了设计规范的作用,那接下来就是设计规范的内容有哪些?

 

我们这里所有的设计规范全部是在750px*1334px设备下的。

 

设计规范中常见的规范:字体规范、颜色规范、图标规范、按钮规范、表单输入规范、弹窗规范、列表规范、图片规范、标签规范、布局规范等

01字体规范

 

图片1.png 

字体规范的设计:对字体的大小进行分类,每个字体大小都有相应的用途。常用的字体大小范围20px~48px,这个字体大小不是确定的,要根据实际需求来制定,不要因规范束缚了设计,失去了设计的意义,得不偿失。

 

注意:字体大小必须是偶数值。

 

02颜色规范

 blob.png

 

颜色规范设计:颜色要有主色调和辅助色之分,在颜色规范中主色调是界面中需要用户关注或者使用的元素的颜色,比如标题颜色、按钮颜色,菜单图标颜色。主色调是采用logo的颜色,如果logo颜色过于刺眼或则复杂,就要考虑使用相近风格的颜色。

辅助色则是界面中用作辅助作用的元素,它虽然不是用户所要想要的东西,但却是可以提高用户体验是重要元素


 

03图标规范


 

blob.png


 

图标规范是被刚入门的设计师很容易忽略的元素,图标在界面设计中越来越必不可少,这是一个流行的趋势。

 

图片2.png


图标规范设计:包括图标的类型,是线性图标还是填充图标。设计图标需要考虑的是相同级别的图标一定要保持一致,包括大小、类型、风格。

注意:在标注的时候,图标的标注和切图有着直接的关系,图标的规范是你切图的标准。

 

04按钮规范

 

 

图片3.png


 

按钮规范在界面中是最常见的,在表单提交登录,注册,重要的操作都是有按钮完成的,按钮分为四个状态,正常状态、(在网页中还会有鼠标划过状态)按下状态,不可点击状态,注意他们的颜色变化

 

05表单规范


图片4.png 


对于表单的设计来说也是比较常用的一种,我们在填写表格或者注册用户时表单是最常见的,对于表单的规范需要注意的是,标题、输入的内容(输入前、输入后、输入中)、提示信息字体的规范。

 

06弹窗规范


图片6.png


弹窗也是我们常用的一种东西,它里面包含标题、内容描述,操作,确定和取消类似按钮。或者是一些简单的提示信息,专门来传达信息。


 

07列表规范


图片7.png


列表在APP界面中是最常见的,比如聊天列表、通讯录列表等,它是用来展示大量信息常用的一种布局方式。我们需要做这样的设计时要考虑列表的图标、标题、内容这三者的关系,列表的高度和列表之间、列表与内容之间的间隔方式、距离都是规范要素。

 

 

 

08图片规范


图片8.png


在我们看到列表规范时就知道图片的大小是不一样的,根据场景界面的需求大小需要有不同的变化,自然规范也要制定才行。图片的尺寸大小要根据列表的宽度及当前的布局方式来决定大小。

 

09布局规范


图片9.png


在布局中我们重点考虑的就是间距,两个元素之间的间距,比如文字标题和内容的间距,图标和文字的间距,输入框和标题的间距,这是我们在设计中最不好把握的设计规范,所以我建议大家以10px位基础,以5为递增单位,既10/15/20/25/30……,但一般来说30就可以了,如果在视觉上没有达到理想还可以继续增加。

 

 

结语

规范就是我们用到的设计元素,功能不同用到的也不一样,我就只列举这些,其它的大家可以慢慢去挖掘。

最后送大家一句话:设计规范只是一种辅助,它的作用就是为了提高工作效率,希望大家不要因为有了规范而感到有了约束,如果是这样那就失去规范的意义。



1514175881211518.png


个人微信号,欢迎来扰



本帖福利:

IOS11 界面源文件下载链接:

https://developer.apple.com/design/resources/



往期好文


【设计篇】在界面设计中新手不知道的那些事系列(一)

【设计篇】在界面设计中新手不知道的那些事系列(二)

【设计篇】在界面设计中新手不知道的那些事系列(三)


回复 使用道具
举报
卖水果的阿甘

发表于 01-18 00:20 显示全部楼层

回复 支持 反对 使用道具
举报
biubiuamy

发表于 01-17 15:05 显示全部楼层

回复 支持 反对 使用道具
举报
nettman

发表于 01-15 17:34 显示全部楼层

回复 支持 反对 使用道具
举报
挽梨

发表于 01-14 12:13 显示全部楼层

前排支持!!

回复 支持 反对 使用道具
举报
任嘉行

发表于 01-13 23:46 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
西山霸王花

发表于 01-13 17:33 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
易文沁

发表于 01-13 14:50 显示全部楼层

顶!顶!顶!

回复 支持 反对 使用道具
举报
中二的我

发表于 01-13 03:34 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
今夜来微微

发表于 01-12 21:53 显示全部楼层

回复 支持 反对 使用道具
举报
12下一页

发表新文章
孙傲

小码哥准会员

0

学分

158

学币

165

积分

小码哥准会员

Rank: 2

积分
165

关注新浪微博

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育