UI设计规范(一)

suiyuankj 2019-4-23 ui设计 756 1 1

大多数新人在开始做移动端UI设计的时候,往往对界面的一些尺寸规范不是很清楚,大多时候都是凭借自己的感觉和经验去绘制界面,心里并没有一个清晰的概念,导致做出来的页面总是不尽如人意。

  • 设计规范的目的/系统
  • 各系统设计尺寸
  • 切图命名和文件整理规范

一、设计规范的目的/系统

  1. 遵循各平台统一的界面规范,使最终设计出来的界面效果达到最理想状态
  2. 提高工作效率,UI/UE/开发三方人员更好的相互协作,减少因资源设计问题导致的反复修改的效率低下的现象发生
  3. 通过规范的方式来达到以用户为中心的设计目的,并给用户呈现最佳视觉效果和最优质的用户体验

目前使用最多的移动端操作系统有Android、IOS、Windows Phone这三大操作系统。

二、各系统设计尺寸

Px:设计师使用Photoshop时常用的单位

dp和sp:安卓开发常用单位

pt:苹果IOS开发常用单位

ppi:像素密度,手机ppi越大,屏幕精度越高

无论分辨率多大,只要找准分辨率对应的密度去理解安卓的倍率关系会发现,其实安卓和IOS是一样倍率规律适配。比如分辨率720*1280,它对应的密度就是320;安卓的设计基准就是以密度160为设计基准的,密度160的基准下1dp/1sp=1px(安卓的点单位为dp,字号单位为sp)。

  • 三、切图命名和文件整理规范
  1. APP界面设计切图命名规范
  2. APP切图技巧分享

1、APP界面设计切图命名规范

APP切图分为以下五大类:背景、按钮、图示、图片、TabBar icon等。

为了让切图便于管理,通常会以图片的性质命名,例如: bg-xxx.png、btn-xxx@2x.png、icon-xxx@2x.png 。在命名时bg-xxx.png 中间的可改为_ 。

掌握好整理文件和上传的方法,有一份清晰的切图文档便于开发和视觉之间的沟通。

2、APP切图技巧分享

  • 用最大的解决一切xhdpi

Android中的xhdpi=IOS的retina@2x

  • 用神器一键搞定CUTTERMAN

本文整理了关于ui设计规范的目的、各系统的尺寸和切图的一些小技巧,希望为刚刚从事UI设计的设计师们提供入门级别的帮助。

转载请注明来自穗源博客,本文标题:《UI设计规范(一)》

喜欢 (1) 发布评论
1 条回复
加载中...
  1. suiyuankj 7个月前 (04-23)
    沙发

    :razz:

发表评论


Top