元知产上线啦 在此推广

设计方法:视觉表现建立信息层级

8年前上传

资讯  /  活动集锦  /  其他 分享 159114|1|1 版权信息 作品版权由 JAY 顿 解释,所有用途允许使用

JAY 顿

作为视觉设计师,我们的作用除了最基本的满足用户审美需求,还会有品牌传达,信息传达,功能传达等,其中想要信息有效的传达给用户,需要我们建立信息层级,而不是一股脑的丢给用户自己理解,要做到这点有哪些视觉方法,这些方法的背后是否有理论依据,是本文的主题。 首先看下面两张图,左图为相机拍摄的效果,右图为人眼不移动时看到的效果,可以发现人眼对信息的获取并不是一次性完成的,它不能同时产生多个焦点从而把视线停留在更多的地方,设计师需要考虑的是让用户通过眼球移动,按照一定的顺序获取信息,帮助获取和理解的过程高效自然。

点评 设计方法:视觉表现建立信息层级
    保存
    添加嵌入
    图中有我的资源
    图中有我的设计

    这个设计方法希望解决的主要是两个问题: 1、用户获取和理解信息的效率建立良好的信息层级,能让用户在有限的时间里,快速获取和理解有用、感兴趣的信息,并产生下一步行为; 2、设计师的专业性设计师有意识的分析信息优先级,了解哪些视觉表现手法可以建立信息层级及每一种方法背后的理论依据,不仅仅凭感觉做设计。 一、前期了解&分析 在开始设计前,除了对项目本身的背景目标有所了解外,视觉设计师针对具体的页面也需要了解一些内容以帮助后面的设计有指导方向,包括页面定位、氛围营造、信息优先级和用户核心行为。 1.1、页面定位是帮助分析页面信息优先级、核心行为的前提通常有: · 用户是谁 · 用户来自哪里,即从什么渠道来到该页面 · 页面内容定位,提供什么、不提供什么 · 页面作用

    点评 设计方法:视觉表现建立信息层级
      保存
      添加嵌入
      图中有我的资源
      图中有我的设计

      1.2、了解页面需要营造的氛围,能帮助我们判断哪些元素能帮助达到目标,氛围可以是内容本身,也可以通过视觉元素设计来营造,但必须注意氛围营造不应强过用户关注的内容本身氛围可能有: · 新年主题大促 · 低折扣 · 信息鲜活 · 用户活跃等等

      点评 设计方法:视觉表现建立信息层级
        保存
        添加嵌入
        图中有我的资源
        图中有我的设计

        1.3、分析信息优先级 1)一级信息吸引用户:假设用户只会在这个页面停留3-5秒,最能够吸引用户继续浏览的是页面的核心卖点,是一级信息,它必须少而精,在设计上要重点展示 2)二级信息帮助理解:有了一级信息的吸引,用户进一步了解内容而可能停留3-5分钟,这时展示二级信息即提炼的精华内容,帮助用户在尽量短时间内理解信息 3)三级信息详细了解:前两类信息基本上能帮助用户获取足够的信息,用户如果继续停留更长的时间去详细了解,这类信息量会更多,在设计上视觉层级会靠后,或通过交互方式展示、提供入口跳转

        点评 设计方法:视觉表现建立信息层级
          保存
          添加嵌入
          图中有我的资源
          图中有我的设计
          点评 设计方法:视觉表现建立信息层级
            保存
            添加嵌入
            图中有我的资源
            图中有我的设计
            点评 设计方法:视觉表现建立信息层级
              保存
              添加嵌入
              图中有我的资源
              图中有我的设计

              二、建立信息层级的视觉方法 视觉表现手法主要有以下几种元素,实际设计中为了让效果拉开主次,可能会同时使用多种方法以达到更好的效果: · 位置 · 大小 · 距离 · 内容形式 · 色彩 2.1、位置 位置是在设计开始就会考虑的元素,人眼观看事物时,总会遵循一些特定的规律,设计上遵循这些规律,能帮助用户更容易、更快捷地看到或理解眼前的事物。其中有两条规律和位置设计元素有关:

              点评 设计方法:视觉表现建立信息层级
                保存
                添加嵌入
                图中有我的资源
                图中有我的设计
                点评 设计方法:视觉表现建立信息层级
                  保存
                  添加嵌入
                  图中有我的资源
                  图中有我的设计
                  点评 设计方法:视觉表现建立信息层级
                    保存
                    添加嵌入
                    图中有我的资源
                    图中有我的设计

                    3)用户优先关注上部,在网页设计中有首屏的概念,首屏的信息比通过用户拖动滚动条出现的第二、三屏层级要高由于用户使用的屏幕分辨率不同造成首屏的高度会有差别,根据我们网站的数据,目前分辨率高度为768占多数,所以设计时会以768高度为基准,去掉浏览器本身的菜单等占用的高度,实际展示给用户的第一屏平均为600px,这个数据会根据以后目标用户的分辨率变化做相应的调整,我们在设计时可用这个数值作为首屏的参考线。 2.2、大小

                    点评 设计方法:视觉表现建立信息层级
                      保存
                      添加嵌入
                      图中有我的资源
                      图中有我的设计

                      Giles Colborne的《简约至上》书中的结论可以指导我们通过大小拉开差距: 1)重要的元素要大一些,即使比例失调也可以考虑 2)要想办法表现出差距;如果一个元素的重要性是2,那就把它的大小做成4

                      点评 设计方法:视觉表现建立信息层级
                        保存
                        添加嵌入
                        图中有我的资源
                        图中有我的设计
                        点评 设计方法:视觉表现建立信息层级
                          保存
                          添加嵌入
                          图中有我的资源
                          图中有我的设计
                          点评 设计方法:视觉表现建立信息层级
                            保存
                            添加嵌入
                            图中有我的资源
                            图中有我的设计

                            除了元素本身所占的面积会影响视觉层级,元素的细节放大程度也同样起到作用,细节放大后,人眼会感受到元素更清晰,离眼睛更近而容易先去关注,当然前提是保证信息可被理解,如果局部细节放大但用户不能理解信息是什么就不能起到吸引用户的作用;

                            关注作者,查看全文

                            关注该作者查看剩余精彩内容

                            声明:本作品为平台个人会员上传,不代表元素谷平台的观点和立场,本平台仅提供信息存储及展示服务。原创或分享该作品的目的是交流学习,若有来源标注错误或侵犯了您的合法权益,可联系上传者或平台官方及时更正处理。

                            • 收藏2
                            • 举报
                            Ta的其他作品
                            1. 全部评论(1)
                            • TONY-LAM

                              TONY-LAM7年前

                              [舔屏]

                              赞同 0 回复 举报

                            查看更多评论 写评论

                            听说第一位评论的人最帅

                            相关推荐

                            • 这个夏天,带你走进神秘的星系部落
                            • 防疫文化墙设计赏析
                            • 3D插画
                            • vivo「去来」刘雯联手打造“更进一步”
                            • 有一种逼格叫做“云显示”!
                            • 长沙北辰三角洲大悦城 #覔
                            • 红牛入选《广告时代》是怎样创造的?
                            • 化妆师把嘴唇当成画布,创作出天马行空的“唇妆艺术”!
                            • 布伦纳姆遗产博物馆的互动式邮政信箱
                            • 创意丨那些火遍全球的网红打卡地,你一准没见过!
                            ×
                            ×
                            选择推广时间
                            推广位置
                              ~

                              选择开始时间

                                    不可选 可选

                                    结束时间

                                          不可选 可选
                                          ×

                                            注:每周可领取一次;周二畅玩领券活动日,优惠券任意领

                                            进入灵感创意站
                                            ×
                                            ×
                                            扫码分享到微信

                                            请使用 微信 扫一扫二维码打开分享

                                            ×
                                            认证提示
                                            案例管理 保护原创 彰显品牌实力

                                            上传案例须先成为企业认证会员

                                            新人礼包

                                            今日大奖

                                              • 移动端

                                                移动端

                                                掌握活动行业动向
                                              • 小程序

                                                小程序

                                                上传作品快人一步
                                              • 服务号

                                                服务号

                                                活动服务小帮手
                                              • 订阅号

                                                订阅号

                                                精选内容一键直达
                                              • 策划群

                                                策划群

                                                策划有圈,灵感无界
                                              • 设计群

                                                设计群

                                                创意灵感交流圈
                                              • 资源群

                                                资源群

                                                这里有个圈让资源活起来
                                              • 活动猎人群

                                                活动猎人群

                                                采集活动增收益