联系我们 face+ 关于 服务 案例
首页 案例 服务 关于 face+

为什么UI设计规范很重要?iosui设计界面尺寸如何规范?

Time: 2021-08-27

做ui设计并不只是将自己的想法实现这么简单,我们在设计时,还需要遵循各种设计规范,那么为什么UI设计规范很重要?iosui设计界面尺寸如何规范呢?一起跟faceui来了解一下吧。

  UI设计

  UI设计(或称界面设计)是指对软件的人机交互、操作逻辑、界面美观的整体设计。UI设计分为实体UI和虚拟UI,互联网常用的UI设计是虚拟UI,UI即User Interface(用户界面)的简称。

  好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。

ui设计界面尺寸如何规范

ui设计界面尺寸如何规范(图片来自网络)


  为什么UI设计规范很重要

  保证平台统一性

  统一性是交互设计的一个基本原则,在一个长期迭代多人合作的项目中,不同的设计师会负责不同的模块,每个人都有各自的思路,就有可能会对相同的元素做出了不同的方案,对于用户来说容易造成困惑,对品牌整体形象的建设也没有好处。所以对于较大型的产品,最好有设计规范来定义基本的元素,帮助众多设计师一起做出有统一性的产品。

  提升团队工作效率

  对于同一个基本元素,如果没有设计规范,交互设计师需要设计一次交互方式,视觉设计师需要设计一次外形,UI开发同学需要开发一次,每个不同的设计师遇到这个元素时都可能重新设计一遍。但如果有了设计规范,只需设计一次,团队中任何一个设计师需要用的时候直接拿来用就可以了,也不需要再进行视觉和开发,极大的提升了效率。

  打磨细节体验

  在整理每个元素的规范时,设计师都需要对其场景、状态考虑清楚。在整理的过程中,经常会发现一些以前没注意到的问题,并进行优化。把一个小元素单独拎出来仔细考量,写成一篇完整规范的过程,其实就是在打磨细节的过程。

  IOSUI界面设计尺寸及栏高度

  目前主流的 iOS 设备主要有 iPhone SE(4英寸)、iPhone 6s/7/8(4.7英寸)、iPhone 6s/7/8 Plus(5.5英寸)、iPhone X(5.8英寸),它们都采用了 Retina 视网膜屏幕,其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是3倍率的分辨率,其他都是采用的2倍率的分辨率,无论是栏高度还是应用图标,设计师提供给开发人员的切片大小,前者始终是后者的1.5倍,并分别以@3x和@2x在文件名结尾命名,程序再根据不同分辨率自动加载@3x或者@2x的切片。

ui设计界面尺寸如何规范

ui设计界面尺寸如何规范(图片来自网络)


ui设计界面尺寸如何规范

ui设计界面尺寸如何规范(图片来自网络)


  通过上面的讲解和图示我们了解了 iPhone 不同设备的物理尺寸,那么他们的像素分辨率又是多少呢?也就是说我们用 Photoshop 做设计新建画布应该设置多大呢?另外,iOS应用中的栏,包括状态栏、导航栏、标签栏、工具栏等,它们的高度又分别是多少呢?(注意:iOS 严格规定了各个栏的高度,这个是必须遵守的)通过下面的表格和图示来为你解答上面的问题。

ui设计界面尺寸如何规范

ui设计界面尺寸如何规范

  注意:在进行 iphone x 设计的时候我们依然可以采用熟悉的 iphone 7 的设计尺寸作为模板,只是高度增加了290px,设计尺寸为750*1624(@2x)。注意状态栏的高度由原来的40px变成了88px,另外底部要预留68px的主页指示器的位置。

ui设计界面尺寸如何规范

ui设计界面尺寸如何规范(图片来自网络)


ui设计界面尺寸如何规范

ui设计界面尺寸如何规范(图片来自网络)


ui设计界面尺寸如何规范

ui设计界面尺寸如何规范(图片来自网络)


  关于iosui设计界面尺寸如何规范的问题就为大家介绍这么多,这些也只是一些经验之谈,更多的还是需要我们实际体验操作才能不断进步。想要了解更多相关内容,也可长期关注faceui。


合作咨询

上海(总部)

上海市浦东新区郭守敬路498号22号楼
021-61057328
service@faceui.com

办公地址地图

北京

北京市东城区后永康17号A座
010-64015620
service@faceui.com

办公地址地图

成都

四川省成都市锦江区东大街牛王庙段100号
028-62790929
service@faceui.com

办公地址地图
首页 | 案例 | 服务 | 关于 | face+ | 智见

Copyright © 2009-2022 FaceUI design. All rights reserved


沪ICP备13044459号-5

上海办公地点地图
北京办公地点地图
深圳办公地点地图
在微信中搜索faceui
或保存二维码在微信中打开