ios设备的设计规范与细节设计

有很多刚入行的设计伙伴会对各种设计规范抓狂,也遇到很多来咨询这方面问题的,我特意为大家找来一篇关于设计规范解剖的一些文章,今天给大家带来的是第一篇《ios设备的设计规范与细节拆解》。

希望今天的这篇文章可以让你对 iOS 的设计规范有一定的了解,所谓规范是死的,人是活的,变化是难以控制的,希望大家不要陷入规范而做出没有突破的设计。我们可以了解与研究规范,但是也要敢于突破,这样才能不断输出差异化的设计作品。

介绍就说到这里,下面我们一起来看看作者的文章,欢迎大家多多留言互动。

 

一. 规范的意义

1. 为什么要遵循规范?

规范由设计升华而来,从视觉的角度来说,实际上就是一个素材库。产品有什么样的视觉呈现和元素定义,都有可遵循的标准,保证日后迭代可以延续产品所传递的思想跟价值,最大限度保证了产品的一致性。

2. 界面规范跟人起名字一样

姓(一到两个字)+名(一到两个字)

3. UI要遵循哪些规范?

 

二. iOS 设计规范

iOS 设计三大原则:

1. 视觉层:清晰

在整个系统中,文字在每一个尺寸都是清晰易读的,图标精确而清晰,装饰精巧而合适,使得用户更易理解功能。负空间、颜色、字体和界面元素巧妙突出重要内容并传达交互性。

设计要点 01:颜色

设计早期可以通过较灰的颜色来避免色彩对于间距和布局的影响,一旦设计完成,需要通过调整颜色和色调,保证色彩在任何情况下都可以辨识。同时,也需要关注色盲人群的体验。

设计要点 02:排版

对任何信息进行排版的时候,首先必须要掌握的是对齐/重复/亲密/对比,贯穿设计的四大原则。

 

2. 交互层:遵从

流畅的动画和清晰美观的界面可以帮助人们了解和与内容交互,而不应该(因为太过花哨而)干扰到用户的使用。内容通常充满整个屏幕,而变透明和模糊常常暗示有更多内容。

3. 结构层:深度

使用不同的视觉层级和真实的运动效果来传达层次的感觉,赋予界面活力,并促进用户的理解,让用户通过触摸和探索来发现程序的功能不仅会使用户产生喜悦感,更加方便了解功能,还能使用户关注到额外内容。在对内容进行导航时,层级的专长效果提供一种有深度的感觉。

 

iOS 规范细节拆解

1. 界面结构

设计要点 01:状态栏(Stayus bar)

a. 状态栏始终固定在屏幕上边缘;

b. @1x 下尺寸为 20pt;

c. 不要自定义状态栏;

d. 避免滚动内容直接透过状态栏显示(设计抽屉导航时);

e. 在使用全屏观看媒体时,可以考虑隐藏状态以及所有页面 UI。

 

设计要点 02:导航栏(Navigation Bar)

a. 导航栏是半透明的(70%),位于状态栏下方;

b. @1x 下尺寸为 44pt(iPoneX 是 88pt);

c. 不要自定义导航栏;

d. 避免导航栏内内容过多,空间数目一般不超过 2;

e. iOS11 导航栏分为两种形式。

 

设计要点 03:标签栏(Tab bar)

a. 标签栏是半透明的(70%),始终出现在屏幕底部;

b. @1x下尺寸为 49pt(iPhoneX 上为 83pt);

c. 标签栏一次最多承载 5 个标签,多于 5 个的图标以列表形式收纳到“更多”里;

d. 标签栏用来组织整个应用层面的信息结构;

e. 标签栏的图标有正负形。

 

设计要点 04:工具栏(Tool bar)

a. 工具栏是半透明的(70%);

b. @1x 下尺寸为 44pt(iPhoneX上为83pt);

c. 工具栏内放置用户最常用的指令;

d. 工具栏可以放置文字或图标,当项目超过 3 个以上的项目可以使用图标。

 

2. 系统字体

在用户界面中,每一个单词和字母都至关重要,好的字体等于好的设计。字体成了界面设计的基石,而我们设计师,则是些这类「信息基石」的修造者。

很多产品都是这样,到了改版的时候,大多都是先不管你好与不好,先喷为敬,喷就万事了。但是话说回来,从下图中的 iOS8 到 iOS9 的更新中,字体更换后 iOS9 确实要比原来的 iOS8 看起来更清楚,不论是汉字还是数字、英文,都要更清晰、直观。

 

3. 人机交互

设计要点:手势(Gestures)

用户通过在屏幕上执行手势与 iOS 设备进行交互,这些手势与内容密切关系,并增强与对象的直接操控感。

 

4. 实际案例解析(以内容类产品为例)

这类产品更多的是内容为王,它连接的是人与信息,核心是信息,用户用产品是为了以最快的速度获取最有用的信息。如何抓住自己有的,而大家没有的内容才是王道,爱奇艺的各种独播、自制等均可以说明这一点。

设计要点 01:左图右文与左文右图

阅读 APP 内容设计符合用户浏览习惯的排版方式,把不必要的信息弱化,突出内容,减少和弱化不必要的干扰信息,让用户更专注。

 

设计要点 02:搜索体验

在顶部导航栏,随时搜索关键词,记录用户搜索历史,每天热门推荐也是很有阅读 APP 人性化的功能。

 

设计要点 03:内容刷新

下拉刷新功能是用户习惯认知的一种交互方式,阅读类的内容刷新还有一种常见形式“Feed 流”,即上滑出现新内容。

 

设计要点 04:页面加载

分布加载:优先加载占用网络资源少的内容,再加载占用网络资源多的内容;

懒加载:主要出现在长界面中,用户可以不断地向下查看内容,达到某个点之后或触发拉动后自动加载更多内容;

预加载:是一种提前加载的方式,例如在闪屏的时候提前加载首页内容。

 

设计要点 05:个人中心

阅读 APP 可以在个人中心的设计上考虑板式的选择,从板式上体现对社交的倾向性。

 

设计要点 06:阅读体验

尽量减少不必要的信息,让用户专注于内容文字本身,把设置等干扰元素隐藏到二级弹窗,同时加入更多人性化功能,长按对文字编辑和查询。

设计要点 07:评论回复

用户在阅读内容可直接进行评论和回复,无需二次点击,简化操作流程。

 

 

 

 

作者 :NGchao

原文链接:https://www.zcool.com.cn/article/ZOTI4NTMy.html

每天更新,
全站高品质素材免费下载!