信息设计中的“父子关系”
交互设计工作核心在于信息架构和交互细节设计。信息架构包括信息分类以及信息展示逻辑设计;交互细节则多表现为控件的选择,交互效果的定义等。在信息设计中,遇到最棘手的问题就是信息量太多而显得设计结果不尽人意,那么在砍不掉需求的前提下(信息太多,也许是需求本身还有被精简的可能性),如何解决这类问题呢?
通常来说,信息设计的时候有很对可遵循的关系在,信息间互斥,信息间相辅相成,信息间属于包含与被包含关系等。那么今天要探讨的是”父子关系”。所谓”父子关系”也就是核心信息与辅助信息(同类信息),重点信息与次要信息(非同类信息)在界面设计上的对比关系。
一、 “父子关系”在设计中的意义
如果你不能做到让一个页面不言而喻,那么至少应该让它自我解释,这是由Krug先生在《Don’t make me think》中提及的观点。而“父子”关系的体现,则是向用户解释哪些是需要被关注的,哪些是当前最重要的,以保证主路径的畅通无阻(即便是广告,如果是定制化的也是有积极意义的)。
二、如何在设计中找到“父子关系”
设计师首先需要判断需要设计的信息间关系。而判断依据可以是业务逻辑,可以是用户操作逻辑。
比如一个成功反馈页面。如果业务逻辑到此为止结束,没有下一步动作,那么反馈信息显得比较重要;如果业务逻辑中这个成功反馈只是逻辑中的一个环节,那么下一步动作的引导则强于反馈信息。
三、 如何在设计中体现“父子关系”
第一步:信息分类
将所有的信息按照某种逻辑(card sorting)归类。归类前将所有信息设置为相同字号,字体,颜色。
分类的设计方法:
线:设计辅助线,实线,虚线等
面:背景底色,背景框
留白:通过信息间空白区域来分割
比如邮箱验证成功页面,按照业务不同,将信息划分为三种:
原有页面
第二步:信息在页面的排列顺序
不同信息在页面排列的顺序是特定的,这个顺序可能一种规范,比如该页面成功反馈肯定出现在页面顶部,引导排后。那么将之前分类好的信息以类为单位,按照这个顺序陈列在页面上。
第三步:信息在页面的优先级
虽然信息在页面上陈列的顺序是某种规范,但是信息的优先级却不受这种规范的限制。在明确优先级之后,我们需要通过设计,将优先级体现出来。
优先级设计方法:层
所谓层的概念,类似ps的图层。就是让优先级最高的信息第一时间吸引用户眼球,并给用户一种距离更近的感觉。通常处理方式有加阴影,加底色等。
比如在邮箱验证成功页面,引导用户完善个人信息优先级最高,那么采用加底色加阴影的方式突出:
第四步:大框架设计完了之后,设计类单位下信息的优先级
对于类单位下信息的设计方法同上面方法一样。
比如会员信息完善引导中信息的设计:页面信息分为3类:标题,action,解释语言。action应该紧随标题存在,
解释语言围绕action附近。注意信息间留白处理。
第五步:交互细节调整
在以上设计步骤完成之后,页面信息基本已经ok。那么交互细节的调整着重从视觉是帮助用户定位信息。
设计方法:区别对待字体,字号,颜色以及样式。
在邮箱验证成功页面,成功提示正文颜色#666666,12px(网站规范);引导文字中链接色#0066cc,标字14px bold等
第六步:做减法
这一步必不可少,刚开始都是采用各种效果已达到页面设计的最好的效果,但是最后的时候要从整体角度出去去看这个页面,将一些过重过多的设计元素去除
最终设计效果:
页面信息层级明显,“父子”关系尤为突出。
四、“父子关系”在平常设计中的应用
A. Apple.com
苹果官方网站首页的信息设计中,包括重点与次要,核心与辅助的关系。
B. Amazon.com
亚马逊默认首页的局部设计中,也存在比较明显的运营息与常规,重点与次要,核心与辅助的关系
Ps:常规信息本身可能是最重要的,比如导航,但是在网站成熟之后用户对导航的认知度很高,反而不再需要视觉强化,而运营信息本身的周期性决定它在某段时间需要被强化。
C. Gap.com
潮牌gap官网女装页面,以人物着装大图为主要推广方式,在信息设计上,运营与常规,核心与辅助信息关系非常明了。
有设计方法的指导固然可以保证页面的规范性和规整性,但是在具体对应的项目中,采用哪一种设计方法需要设计师有深入的思考和分析,同时,在完成项目之后对设计review并能总结经验,以取得更大进步。
sandy http://www.aliued.com/2012/07/28/1021/
转载于:https://www.cnblogs.com/yuanzheng/p/3193327.html
信息设计中的“父子关系”相关推荐
- matlab虚拟现实之在V-Realm Builder2中建立父子关系
我们设计的模型存在着配合等一些关系,拿一个连杆机构来说,一个关节点和一个杆之间应该是父子关系,驱动关节,从而带动连杆的位移和旋转,因此我们常常需要在V-Realm Builder2中的模型里建立父子关 ...
- mysql查询父子关系树_swt 生成树[读取Mysql数据库中的父子关系表]
数据库中的表结构: id pid 1 0 2 1 3 1 4 2 6 2 5 4 需要生成 ...
- 响应式网页设计_响应式网页设计中的常用技术
响应式网页设计 在先前的文章中,我讨论了为什么Web准备就绪以进行响应式设计 ,以及网站所有者如何使用用户设备和屏幕空间的上下文来跨各种尺寸的屏幕(包括PC,电话) 为用户提供上下文相关的体验.和控制 ...
- 计算机交互媒体应用范围,浅析交互媒体设计中的科技与艺术的关系
颜成宇 孙博 摘 要:科学技术发展带来的影响是多面的,最重要的体现是给生活方式带来的变化.不仅表现在人们的衣食住行,还表现在对人们精神层面的影响.随着数字化时代的到来,交互媒体在实际生活中的应用也越来 ...
- 《信息物理融合系统(CPS)设计、建模与仿真——基于 Ptolemy II 平台》——1.3 模型在设计中的作用...
本节书摘来自华章出版社<信息物理融合系统(CPS)设计.建模与仿真--基于 Ptolemy II 平台>一书中的第1章,第1.3节,作者:[美]爱德华·阿什福德·李(Edward Ashf ...
- 软件工程与计算II-13-详细设计中的模块化与信息隐藏
13-详细设计中的模块化与信息隐藏 1. 内聚和耦合 概念重要 内聚:内聚表达的是一个模块内部的联系的紧密型:包括信息内聚.功能内聚.通信内聚.过程内聚.时间内聚.逻辑内聚和偶然内聚. public ...
- 7种方式玩转信息可视化中的时间线设计
时间常常被认为是一种主观的体验,然而在可视化的表达中,时间却成为了结构化维度.时间帮助我们构建稳健而直观的框架,使我们更好地建立事件间的联系. 按照时间线的方式阐述信息已经广泛应用于企业传播.营销的各 ...
- 信息可视化中的时间线设计,不懂的过来
阐述信息已经广泛应用于企业传播.营销的各个领域.从小扎.雷总介绍新产品,到日常做年报.里程碑事件的PPT,我们都能发现时间线的身影.或许你和我一样抱有疑惑:怎样才能将时间线用得出彩?那么今天我们不妨看 ...
- 神经网络是存储了海量的信息还是将海量的关系映射存储在了一起(发挥了存储记忆功能),还是变成了看似是一个公式,实际是成千上万个规律的公式融合在一个式子中( 类似于正弦波的傅里叶分解成无限中频率的波的加和
神经网络是存储了海量的信息还是将海量的关系映射存储在了一起(发挥了存储记忆功能): 还是变成了看似是一个公式,实际是成千上万个规律的公式融合在一个式子中( 类似于正弦波的傅里叶分解成无限中频率的波的加 ...
最新文章
- Failure [INSTALL_FAILED_ALREADY_EXISTS
- Matlab图像处理教程
- 惠普打印机节能环保认证证书_低成本高效办公 苏宁惠普超品日这几款打印机了解下!...
- 修改 mysql 的默认端口号_mysql的默认端口号修改方法
- linux下游戏制作工具,在Linux下可用Wine安装和运行D5Power游戏制作工具、蜂窝助手...
- QT自动检测系统语言代码
- 主板电源开关接口图解_【转】图解:各种主板接线方法 主板电线接法(电源开关、重启等)...
- 一行命令解决centos下git永久保存密码
- linux curl证书错误,curl – SSL证书错误
- as3.0点击获取TLF文本的实例名
- win7命名计算机无法下一步,win7还原系统不能点下一步怎么办(无响应)
- 2022最新版40个前端练手项目【附视频+源码】
- 【强化学习】分层强化学习
- 云主机使用的范围有哪些?
- 屏蔽CSDN右下角广告
- 银户通便捷服务加速金融智能化进程
- 群辉DSM6.2下载 Transmission中文版介绍以及出现 syntax error near unexpected token 问题解决
- 索骥馆-文学理论之《文学的故事:中国卷/世界卷(全2册)》全彩版[PDF]
- 基于深度学习对皮肤病进行识别设计与实现
- Windows下Core Audio APIS 音频应用开发(五)
热门文章
- ASP.NET伪静态-无法读取配置文件,因为它超过了最大文件大小的解决办法
- unexpected AST node
- 浅谈MAXIMO项目实施(转)
- creo减速器建模实例_3.16减速器箱体附件建模
- 二值形态学操作、图像的边缘检测、图像编码
- MATLAB的VLFeat工具箱
- GIS实战应用案例100篇(二)-元胞自动机模拟城市扩张过程
- 只会python怎么挣钱_业余学python有用吗
- 服务器系统报错kernel-power,第十二讲、Linux服务器操作系统1.ppt
- 利用Vulnhub复现漏洞 - JBoss JMXInvokerServlet 反序列化漏洞