如何在UI设计中建立良好的视觉层级.docx

如何在UI设计中建立良好的视觉层级 随着互联网信息爆炸式增长，用户浏览单个网页时，并不像我们想象的如阅读文章般从左到右、从上倒下逐一查看，那么朋友们和丝路教育一起了解如何在设计中建立良好的视觉层级! 一、 视觉层级为什么重要 INCLUDEPICTURE \d /uploads/allimg/160415/105J524E-0.png \* MERGEFORMATINET  左侧是设计师期望用户的浏览方式，右侧为用户实际的浏览方式—摘自《Don’t make me think》 用户来到一个网站有他自己特定的目标，如阅读新闻、购物、查看新消息，然而信息量太大，逐一查看需要大量时间，这就要求网站设计能抓住主流用户特征，将重点推送给他，用户找到自己的目标或感兴趣的点，才有可能继续浏览或产生下一步动作，否则就会离开。 用户时间有限加上互联网信息量巨大，这两项原因正是考验视觉设计师要建立良好的视觉层级呈现给用户，帮助???户快速找到目标的功力。 二、 建立良好视觉层级的作用 1、 提高识别效率 2、 激发受众兴趣 举几个例子： INCLUDEPICTURE \d /uploads/allimg/160415/105J5DM-1.png \* MERGEFORMATINET  左地图是市级展示的地名，当用户搜索到街道级别时，才会把本街区内的店铺展示给用户，在特定的情况下只展示必要的信息，有利于用户高效找到自己的目标 INCLUDEPICTURE \d /uploads/allimg/160415/105J51148-2.png \* MERGEFORMATINET  我们看新闻时首先要关注的当天的头条新闻，其次是编辑推荐的，时代周刊首页很好的让头条新闻和logo一起第一眼被我们捕捉到，主次处理的很清晰 INCLUDEPICTURE \d /uploads/allimg/160415/105J51241-3.png \* MERGEFORMATINET  辛德勒名单电影中的某镜头，通过色彩强烈的对比拉开视觉层次，给观众留下了深刻的印象同时成为经典 三、 如何建立视觉层级 我整理了三个方向内容供大家参考： 1、决定不要展示什么 页面简约的前提是所呈现的内容都是主流用户多数情况下必需的，这样可以让设计师专注于解决有限的重要问题，而不是大量的信息没有经过筛选就开始排列优先级 INCLUDEPICTURE \d /uploads/allimg/160415/105J53559-4.png \* MERGEFORMATINET  上图是我们家中常用的遥控器，大多数功能使用量很少甚至一次都没有用过，右图将不常用的功能键做简单的删除，前后对比，后者看起来让人轻松多了—摘自《简约至上》 再由设计师对剩下的按键进行设计，相信遥控器使用起来会更简单，干扰更少。 INCLUDEPICTURE \d /uploads/allimg/160415/105J51127-5.png \* MERGEFORMATINET  Outlook邮件网页界面设计，默认情况下对邮件的操作入口都是隐藏的，只有当用户选择了邮件之后，才会出现对邮件的操作，同时不常用的操作也会被隐 藏到下拉菜单中，如“答复”菜单下隐藏的“全部答复、转发”，这种隐藏非核心内容的处理方式，能让用户更集中于他可关注的信息和主要操作 2、 深度加工信息 INCLUDEPICTURE \d /uploads/allimg/160415/105J54J0-6.png \* MERGEFORMATINET  为了更快速的让信息被感知和接收，我们需要对信息进行加工，简单的文字罗列需要用户静下心阅读，而经过深层分析的比表层分析的信息，给用户留下的印象会深刻很多。 INCLUDEPICTURE \d /uploads/allimg/160415/105J51126-7.png \* MERGEFORMATINET  举个例子：国家地理蓝鲸网站为了呼吁保护蓝鲸，首先要让人们了解蓝鲸的特征及当前的威胁，网站设计通过动态的将蓝鲸与其他生物和人造物进行对比，形象直观的传达蓝鲸的重量、大小，加上视频展示目前蓝鲸的主要生活威胁，用户即使不阅读文字也能大致明白网站想要传达的信息 3、组织信息 1) 表达信息之间的关系 信息之间的关系有并列、关联、包含、因果等，每种关系都可以通过多种视觉表现形式来传达，这块可以深入去探讨，我大致举一些实际项目过程中对信息关系处理的案例，来看看前后的变化 信息的关联 INCLUDEPICTURE \d /uploads/allimg/160415/105J54945-8.png \* MERGEFORMATINET   HYPERLINK /ui/ \