雨柠菇凉|UI设计基本规范( 二 )
内容间距
一款APP除了状态栏、导航栏、标签栏、工具栏和控件icon就是内容了 ， 内容的布局形式多种多样 。 格式塔邻近性原则认为：单个元素之间的相对距离会影响我们感知它是否以及如何组织在一起 ， 互相靠近的元素看起来属于一组 ， 而那些距离较远的则自动划分组外 ， 距离近的关系紧密 。
九、内容布局
在APP的设计中内容的布局形式多种多样 ， 最常用的两种布局形式就是列表式布局和卡片式布局 。
列表式布局
列表式布局方式非常普遍 ， 随便打开一个APP ， 基本都存在这种布局方式 ， 其布局形式的特点在于能够在较小的屏幕中显示多条信息 ， 用户通过上下滑动的手势能获得大量的信息反馈 。 而列表也是一种非常容易理解的展示形式 。
卡片式布局
形式非常灵活 。 其特点在于 ， 每张卡片的内容和形式都可以相互独立 ， 互不干扰 ， 所以可以在同一个页面中出现不同的卡片承载不同的内容 。 而由于每张卡片都是独立存在的 ， 其信息量可以相对列表更加丰富 。
在使用卡片式布局的时候要注意卡片本身一般是白色的 ， 而卡片之间的间距颜色一般是浅灰色 ， 当然不同产品风格颜色可能不一样 ， 有些是浅灰色偏蓝等 。
十、界面图片设计比例
在UI设计中 ， 对于图片的尺寸和比例没有严格的规范 ， 设计师往往凭借经验和感觉设置一个看起来不错的尺寸 ， 但事实上我们是有章可循的 。 运用科学的手段设置图片的尺寸 ， 可以获得最优的方案 ， 常见的图片尺寸有16:9、4:3、3:2、1:1和1:0.618(黄金比例)等 。
十一、APP版式设计规范
版式设计又叫做版面编辑 ， 即在有限的版面空间里 ， 将版面的构成要素如文字、图片、控件等根据特定的内容进行组合排列 。 一个优秀的排版要考虑到用户的阅读习惯和设计美感 ， 在UI设计中版面设计的原则有哪些呢?
十二、界面文字设计规范
文字是APP中最核心的元素 ， 是产品传达给用户的主要内容 ， 所以说文字在APP的设计中是非常重要的 ， 那么 ， 文字的字体如何选择 ， 字号如何设定 ， 是否加粗 ， 颜色如何设置
在一款APP中字号范围一般在20-36之间(@2x),当然iOS11中出现了大标题的设计 ， 字号还是要根据产品属性酌情设定 。 另外需要注意的一点是所有的字号设置都必须为偶数 ， 上下级内容字号极差关系为2-4号 。 关于字体 。
十三、切图规范
当界面设计定稿之后 ， 设计师需要对图标进行切片提供给开发工程师 ， 通常我们只需要对icon进行切图即可 ， 文字、线条和一些标准的几何形状是不需要切图的 ， 例如搜索框只需要在标注中描述它的尺寸、圆角大小、背景色值、不透明度即可 ， 开发工程师可以用代码实现这种效果 。
输出切片
先将设计稿中的图标重新排列在一张新的画布中 ， 保证同样尺寸的图标间距相同 ， 这样做的好处是为图标建立一个控件库 ， 有利于图标的整理 。
给每一个图标建立好参考线之后 ， 用PS自带的切片功能 ， 沿着建立好的每个图标的参考线画框即可 ， 注意最后要输出PNG格式的切片(PNG格式拥有更多的颜色和细节并且支持透明) 。
在具体操作时首先要将画布背景色去掉 ， 让画布变成透明 ， 做好切片后执行文件-存储为Web所用格式 ， 在对话框中选择PNG格式 ， 点击「存储」即可
切片命名
切片命名的通用规范是 ， 界面_功能_状态.png 。 名称应使用英文命名 ， 不要使用数字或者符号作为开头 ， 使用下划线进行连接 ， 例如一个首页处于正常状态下的按钮命名是home_btn_nor@2x.png 。 其中界面首页是home、空间按钮是btn、状态正常是normal 。 为了命名的正确性 ， 设计师需要先和合作的开发工程师进行沟通确认 。
十四、设计稿标注
当界面设计定稿之后 ， 设计师需要对界面进行标注给开发工程师在还原界面时进行参考 。 借助一些专业的标注工具有利于我们提高工作效率 ， 常用的标注工具有MarkMan或PXCook 。
推荐阅读
- 美丽探索|去世时仅66岁，“建筑女魔头”扎哈?哈迪德：北京大兴机场设计者
- 服装设计师小卷|乔欣透视黑裙抢镜，女明星走红毯谁最美？三十而已造型集体翻车
- MEFine觅范|上海近期值得看的时装展，细数Dior历任设计师
- 沃美沃|可收藏，阳台露台小花园设计要点
- 简易设计|这样做对吗？听完师傅分析才懂，把卧室厕所改成衣帽间被老公骂
- 引领时尚新时代|连帽的设计休闲又可爱，保暖的同时视觉也更丰富，秋冬棉服必备款
- 泪雨不分|设计师礼仪礼节规范
- 乐舞蹈|勾勒出一个迷人的曲线，吊带的V领设计能为你带来丝丝的凉快感
- G时尚|设计感衬衫搭配机能风束腿裤，黄渤街舞造型释出
- get|这是你没见过的“AJ13”，全掌透明气垫+拉链设计