0 Comments

跟上潮流!手把手带你入门IOS 8人机界面设计(上

发布于:2014-12-10  |   作者:广州网站建设  |   已聚集:人围观
学习iOS设计----iOS8的颜色、文字和布局学习

编者按:之前发布了一篇2万多字的IOS 8的人机界面交互指南,可能很多同学木有看完,今天着重挑色彩、文字与布局3个方面来讲,@网秦UEC  的同学已经很细致地将图片都译为中文,全是脱水干货,来涨姿势咯。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

上一篇指南地址:《腾讯力作!超赞的iOS 8人机界面指南(1):UI设计基础》

在去年,Apple针对新时代用户彻底更新了其设计语言。现在的设计语言相对之前大为简化,能够让设计师将精力集中到动画和功能上,而不是繁复的视觉细节上。

很多人都曾问过我:设计应当如何入门?成为一名优秀设计师有没有捷径可走?要我说,虽然没有捷径,但确实有几个适用于iOS的设计技巧和规则能够从全局角度改变你的设计方式。

当然,即便你目前的设计目标是完全不同于iOS的平台,相互之间的设计理念也是相通的,你可以将在web和印刷领域学习到的技巧运用到iOS设计中去。iOS 8是一个让设计寻回根源的平台,它给人一种类似现代杂志的感觉,文字精美、布局简单。本文中所介绍的内容将在你未来设计优秀产品的旅程中给你带来巨大的裨益。

iOS 8人机界面指南

在开始设计之前,我们需要先了解一下都有哪些资源可为我们所用。幸运的是,这方面资源还是很多的。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

如果你还没读过iOS 8人机界面指南,我强烈建议你快速浏览一遍,让自己从整体上了解一下新版本进行了哪些改变和改进。

核心理念

iOS 8包含3大核心理念:遵从、明晰与深度。

下面我将这几项设计原则的含义细化成能够实际操作的内容进行解释,当然,我解释的深度将远甚于Apple指南。

顺从

以内容为主角,其他都是配角。所使用的元素应当作为内容的补充,不要使用会分散人注意力的视觉元素与内容争抢目光。

简化

将用户界面简化到只保留最核心的美感。每次在你要添加新元素时都应自问:是否必要?如果你的应用不属于游戏或者没有特定的主题,那么请慎重使用大量的材质、3D效果和多重阴影,将关键放到功能性颜色、协调渐变和美观的文字上。

内容最大化

内容应占满整个屏幕,给内中的元素留出最大的空间。不要使用多重容器,将滚动区域最大化以便给交互留出更多空间。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

颜色

使用显眼的颜色表现能够点击或需要突出的元素。颜色和中性色调选择的正确与否将决定你设计的成败。这是iOS 8设计中将要深层次讲解的一个方面。

文字既是内容

为了简化用户界面以及突出内容,文字将占到整个屏幕的50%到90%。考虑到这一点,你应当选用漂亮的字体,通过设定适当的粗细、线宽和颜色使其达到视觉美观、适合阅读的状态。这一方面将在文字部分进行更深入的介绍。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

负空间

使用负空间凸显内容。你所能看到的东西越少,就越能将注意力全部集中到仅有的物体上。负空间能够留出呼吸的余地。不用在屏幕中堆砌太多的结构和无用的视觉元素。

图标状态

用于导航的图标有两种状态:轮廓及填充。使用轮廓的好处是不分散注意力。如果对图标进行填充,就会转移人的注意力。另外其还可能表示当前页面为活动页面。

明晰

让一切显然易懂。按钮应当表现出自己的功能,文字应该方便阅读并留出舒适的间距。你的内容应当明确表现出应用的功效。例如,如果是有关咖啡的应用,则应当能让人联想到咖啡豆、浓缩咖啡和咖啡的棕褐色。

文字要方便阅读

在视网膜屏幕上,文字的大小不能小于22px。最佳阅读尺寸为32px。

使用作用明确的图标

图标不能含混不清,应当明确表现出自身的作用。在可能的情况下,尽量使用文字辅助。如果你使用了图标,那就一定不能在其他地方使用与当前图标类似的其他图标,否则会让用户看不懂。同样,不要使用“后退”或者“提交”这种太泛泛的文字,而应尽可能明确,例如“返回首页”或者“注册新账号”等。更多细节请阅读图标部分。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

描述性画面

每个页面都应说明自己的用途。尽量减少使用品牌内容,代以明确的画面标题,如果采用了标签栏,则还应使用高亮的当前标签状态。
广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司,品牌网站建设

标签:
飞机