每天我们都面临着日新月异、层出不穷的网页界面和APP界面, 若页面中大量的信息没有得到视觉层次划分往往会让读者花费相当一部分时间进行信息过滤, 那么通过什么样的方式可以设计出即高效又保持视觉效果的界面呢?首先, 设计之前通过大数据的市场调研, 不难发现, 多数用户在进入界面之前是抱有目的性的, 如浏览实时新闻、购物、查看消息等, 但现有界面提供的信息量普遍较大, 用户逐一阅读需要一定的时间, 这就迫切要求设计师抓住主流客户的“通点”即特征, 结合APP或是网页的主推专题的特点, 挑选重点或是最具关注度的消息推送给用户, 他们浏览界面时, 迅速找到自己的目标或有兴趣的内容, 才会点击进入下一页面, 若是这个APP界面用户使用得心应手, 再次或是多次使用的可能性也会随之增加, 逐渐会建立依赖性和潜意识。
由此可见, UI设计师建立良好的界面视觉层次可以切实帮助用户解决浏览时间有限和界面信息量较大这两个问题。这才是对设计师真正的考验。如何准确构建视觉层次效果, 视觉的传达者一直在寻找属于合适的工具。而视觉层次能够迅速发展并得到大众的, 苹果公司功不可没, 是它掀起了智能移动化浪潮, 将一些想法或设计展现在大众眼前, 受人追捧逐渐形成主流。下面将总结ios11在ios10的基础上又做了什么方面的改善, 使得视觉层次变得清晰简单。
过去ios视觉层次主要通过分隔线和文字大小表达, 而在新版中使用了新的方式, 例如大面积阴影、字重、色块等。运用一种叫“Card UI”的方式, 即在一个简单的几何图案下添加一层阴影, 使一个原本二维的视觉层次转化为一个微三维视觉层次。下面将总结ios11在io10的基础上又做了什么方面的改善, 使得视觉层次变得清晰简单。
一、尺寸
ios11在主界面APP名称的字重改变, 增强页面的阅读体验, 举个简单的例子, 若两个大小不一的圆形出现在眼前, 人会不由自主被较大的圆形所吸引, 这是人的天性。因此形态尺寸的控制将成为制造视觉层次的工具, 它能够有效的引导用户的视线流程, 网页中的重要信息往往会与尺寸结合起来, 页面中用最大元素来表达的一定是最重要的, 是引导用户第一眼就捕捉到它的讯息。
二、颜色
ios11的更新, 在解锁界面中会发现原先空心效果变为实心, 整体色块感加重。世间万物皆有颜色, 在视觉层次中颜色也是最巧妙的一项工具, 它既可以在组织上和个性两方面起到作用, 在组织上, 对比强烈且醒目的颜色在特定的位置上引起更多的关注, 例如超链接、错误信息、返回键等, 但当它们作为一个个体展现个性时, 颜色可以延伸到更加精炼的视觉层次中。不同风格的网页或APP使用的颜色也不同, 传递的讯息也随之变化, 通常使用简约、舒适的颜色会吸引用户情感的需求。纵观整个页面, 颜色会影响到每个角落, 从风格到具体形象, 它能够在整体中最有效的将信息进行分类和归纳, 极具张力。
三、元素
控制中心的改善得到了大众一致赞扬, ios11系统将多页改为单页, 用户可以自行制定功能及其排列顺序, 用户依据自己的使用习惯人性化的定制功能, 在3DTouch中用统一的矩形元素展示不同的按钮设定。视觉层次中将内容进行规划, 相同的视觉框架可以用同一元素展示, 保证页面的统一性, 用户使用时避免跳跃性太强。同时, 每个网页都需要逐级跳转, 互动性将每个元素分开并创建下一级层次, 页面当中展现出标题、副标题、详细内容, 而将他们进行视觉层次分隔的常用于空白和简单线条元素。
四、互动
IOS的互动设计一直逊色于安卓系统, 但此次ios11系统增加了手机界面与用户的互动, 增加人机互动的亲密性, 每位设计师拥有属于自己的设计风格, 在视觉层次互动时, 将其自身的特性融入其中, 用户与设计师的间接互动的感受超越了其他工具, 但“个人风格”往往是设计师最具争议的使用工具, 页面能够正常的浏览离不开设计师引领, 若过分追求自身的风格会轻而易举的误导用户或是忽视了信息的传递, 所以设计师要在过程中将无用元素剔除, 信息层次梳理清楚、互动效果强化。
网页设计师将信息随着视觉层次将所要传达的信息集中展示, 突出重点, 运用以上工具通过一种全篇布局的思维和手段, 将信息准确无误的贯穿整个网页中。与此同时要利用设计师个性化的风格处理方式满足用户在浏览过程中的审美追求, 用户在获取信息的同时感受到视觉体验。
摘要：UI界面设计与用户而言就是视觉层面的交流, 界面中的信息需要被区分开来, 在用户浏览过程中能准确无误的接收到重要信息, 引导使用者能依照设计的路线进行浏览。高效率的设计师必须有能力将产品的设计思想传达出来, 人对事物的接受程度有限, 如果在一个界面展现了充足的信息量, 在百人中往往只有寥寥几人能够耐心读完, 这是为什么呢?天性使然, 人们是视觉欣赏着而不是信息和数据的处理者。本文将分析有哪些方式可以区分视觉层次, 对比并分析苹果公司ios10和ios11两个不同版本的界面, 阐述苹果手机在视觉层次方面运用新的方式做出改良和突破, 对未来界面视觉层次设计是否会起到指向标的作用以及启发设计师全新的设计思路。
关键词：视觉层次,信息交流,高效率,方式,设计思路
参考文献
[1] 魏东.表象与内在——版式设计中的视觉层次、信息层次和概念层次[J].美术大观, 2010 (3) :55-55.
[2] 黄琳斯.视觉层级下的网页布局设计研究[D].中南民族大学, 2014.
[3] 刘海飒.信息视觉化与视觉化信息——浅谈平面设计中的信息传达[J].美苑, 2006 (3) :66-67.
[4] 吴桦.版面设计怎样实现对受众视觉流程的最佳引导——兼谈版面的视觉中心与结构重心[J].新闻研究导刊, 2014 (4) :30-32.
[5] 何远敬.视觉显著点与信息传达——谈版面组织的视觉层次[J].岭南师范学院学报, 2008, 29 (4) :137-140.