怎样规范设计移动端APP的UI

2024-10-12 12:05:23

现在移动设备越来越多对于设计者来说怎么样才能规范的设计出移动端的APP呢?小编宾哥作为一个资深的程序员出生为大家带来详细的讲解,以下均为个人看法如有更佳的解答或者补充请回复!

怎样规范设计移动端APP的UI

工具/原料

Android/IOS/Web Mobile

规范目的/系统

1、遵循各平台的统一的界面规范,使最终设计出来的界面效果达到最理想状态

怎样规范设计移动端APP的UI

2、提高工作效率,UI/UE/开发编码三方人员相互之间协作更轻松,减少因资源或设计问题导致的反复修改、重复劳动、效率低下的现象

3、通过规范的方式来达到以用户为中心的目的,给用户呈现最佳效果和最优质的体验

4、目前使用最多的移动端操作系统平尊怠哉砑台有Android、IOS、Windows Phone其他的操作系统包括BlackBerry 10、NokiaOS、Firefox 、Sailfish OS、Tizen、UbuntuTouch

怎样规范设计移动端APP的UI

设计尺寸/屏幕支持

1、IOS:宽度640PX 高度1136px当然还需要自沾咎悉能适应模式,以便以后的屏幕扩充需求。IOS系统从iPhone4开始已经进入Retina(视网膜屏)时代,资源尺寸比例从原来的1X变为了2X。

怎样规范设计移动端APP的UI怎样规范设计移动端APP的UI

2、Android:宽度720px 高度1280px同样的设计成自适应模式,现在Android系统的屏幕也是越来越多样!Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)四类

怎样规范设计移动端APP的UI怎样规范设计移动端APP的UI

3、Web Mobile:宽度640px 高度960px这个对于网页的浏览来说是最适合不过了的!

怎样规范设计移动端APP的UI

细节模块(客户端/Web内嵌)

1、导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,ios导航栏的ui图标格式为60px留白7px,Android系统的可以为:64px*48px留白8px

怎样规范设计移动端APP的UI怎样规范设计移动端APP的UI

2、标签栏:让用户可以在不同子任务、视图、模式之间切换。ios系统Tab Bar:98pxAndroid系统Tab Bar:96px

怎样规范设计移动端APP的UI

3、工具栏:放置当前屏幕或者视图下对相关对象的操作按钮。ios系统Tab Bar:88pxAndroid系统Tab Bar:96px

怎样规范设计移动端APP的UI

4、为了能够让用户有更好更直观的体验,资源需要有各种状态。

怎样规范设计移动端APP的UI

5、列表:无论哪种形式列表,单行列表高度必须是用户手指接触的最佳值ios系统Height 88pxAndroid系统Height 96px

怎样规范设计移动端APP的UI

6、字体:IOS:默认字体 英文 HelveticalNeue 中文 黑体Android:默认字体 Droidsans fallback 是谷歌自己的字体,与微软雅黑很像

7、字号:以下图IOS为例子我的音乐:34 px我的、淘歌、发现: 30 pxMuxx 34 px本地音乐 30 px泡沫、邓紫棋 24px

怎样规范设计移动端APP的UI

8、桌面ICON:根据系统的不通桌面的图标设计也需要根据设计成不通的尺寸。

怎样规范设计移动端APP的UI

9、细节模块(Web内嵌):细节最为重要,只有好的内容和完美的细节才能吸引住浏览者的关注!所以在制作的过程中也需要更加的关注!

怎样规范设计移动端APP的UI怎样规范设计移动端APP的UI怎样规范设计移动端APP的UI
猜你喜欢