在广义上,任何告知用户他在哪里,他能去什么地方以及如何到达那里的方式,都可以称之为导航.当设计者使用导航或者自定义一些导航结构时,请注意:尽可能提供标识.上下文线索,避免用户迷路:保持导航样式和行为一致或者减少导航数量,降低用户学习成本:尽可能减少页面间的跳转(例如:一个常见任务需要多个页面跳转时,请减少至一到两次),让用户移动距离保持简短.一.导航菜单1.顶部导航菜单顶部导航菜单的形式就是把超链接连成一行,信息内容层级比较简单明了,适用在浏览性强的门户性质以及比较前台化的应用.一级类目建议在…

布局是页面构成的前提,是后续展开交互和视觉设计的基础.设计者在选择布局之前,需要注意以下几点原则:明确用户在此场景中完成的主要任务和需获取的决策信息.明确决策信息和操作的优先级及内容特点,选择合理布局.一.常用布局网站展示页.Dashboard.列表页.表格页.详情页.表单页.在设计前先了解这些模板有助于让用户快速找到适合自己产品的页面布局.1.网站展示页网站展示页(即官网页)通常是用户了解网站或产品的第一步.这类页面通常会包含产品展示图,简短的产品介绍信息,以及用户登录入口等.在设计时我们建议…

在界面中,我们需要通过对话的方式与用户产生共鸣.精准.清晰的语言会更容易让用户理解,合适的语气更容易让用户建立信任感.因此在界面设计时,文案也应当被重视. 在使用和书写文案时有以下几点需要注意:从用户角度出发表述一致重要的信息放在显著位置专业.精准.完整精简.友好.正面一.语言1.明确表述立足点在表述内容时,关注点应该是用户和他们能用你的产品做什么,而不是你和你的产品在为他们做什么,所以内容表述的立足点很重要.注:当用户向后台反馈问题.提出建议或申诉时,使用『我们』是合理的语境,例如『我们将会审…

一.颜色Red热情.警示 Green成功.通过.安全 Blue专业.科技 Pink典雅.明快.女性 Orange醒目.温暖 Purple高雅.浪漫 Yellow活力.提示 Cyan清新.冷静.结构化 Grey平稳.中性二.色彩应用1.品牌色的应用品牌色是体现产品特性和传播理念最直观的视觉元素之一2.中性色的应用灰色作为中性色,它的使用有利于关键内容的衬托和功能的引导.这类色彩主要体现在导航框架.背景底色.描边.或次级操作等等.3.功能色的应用这类色彩起到传递功能信息.代表某种状态等作用.主要应用…

数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易懂的文案作为『标签(Label) 』:为领域专家提供专业术语作为『标签(Label) 』.当需要用户提供敏感信息时,通过『暗提示』来说明系统为什么要这么做,例如:需要获取身份证号码.手机号码时:让用户能在上下文中获取信息,帮助他完成输入.使用『良好的默认值』.『结构化的格式』.『暗提示』.『输入提醒…

跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好的阅读体验的同时,使页面的视觉层次更加清晰.使用时有以下三点需要注意:合理的使用不同的字重.字号和颜色来强调界面中最重要的信息:尽可能的使用单种字体,混合使用多种字体会让界面看起来零散和草率:遵循 WCAG 2.0 标准,字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准. 一.字体家族优秀的字…

图标是具有指代意义的图形,也是一种标识.通过使用图标表达命令,强调状态,表示产品或类别.为了系统及跨平台之间图形认知保持一致, 图标在设计和使用时有以下两个原则点需要注意:简单的图形语言以及高辨识度.清晰.直观的图标更能明确指代含义便于识别记忆:保持图标之间一致的风格和表现方式.界面中的所有图标都应该在细节设计.透视和笔画权重上保持一致.一.系统图标系统图标通常用来表示常用的操作,比如:删除.保存.编辑.也可以用来表示一个文件或者状态.2.关键轮廓线根据不同的图标形状类型使用不同的轮廓线,可以使…

1.亲密性 a)纵向间距示例这三种规格分别为:8px(小号间距).16px(中号间距).24px(大号间距). b)在这三种规格不适用的情况下,可以通过加减『基础间距』的倍数,或者增加元素来拉开信息层次.注:A.y=8+8*n.其中,n>=0,y 是纵向间距,8 是『基础间距』.B.增加元素示例,通过增加『分割线』来拉开层次.c)横向间距关系为了适用不同尺寸的屏幕,在横向采用栅格布局来排布组件,从而保证布局的灵活性.在一个组件内部,元素的横向间距也应该有所不同. 2.对齐a)文案类对齐如果页面的…

为了帮助用户了解应用当前要做什么,也给用户的下一步行为做参考,以及了解操作后所产生的结果 ,当用户和系统需要交互时,使用不同的模式来反馈信息或结果.当设计者使用反馈或者自定义一些反馈时,请注意:为用户在各个阶段提供必要.积极.即时的反馈:避免过度反馈,以免给用户带来不必要的打扰,能够及时看到效果的.简单的操作,可以省略反馈提示.一.提示信息1.警告警告提示(Alert)是一种非阻碍式的信息展示,它不打断用户的当前操作,一般停留至页面某个位置(优先顶部),非浮层的静态展现形式,始终展现,不会自动消…

合适的数据展示方式可以帮助用户快速地定位和浏览数据,以及更高效得协同工作.在设计时有以下几点需要注意:依据信息的重要等级.操作频率和关联程度来编排展示的顺序.注意极端情况下的引导.如数据信息过长,内容为空的初始化状态等.1.表格表格被公认为是展现数据最为清晰.高效的形式之一.注: 1. 表格中的时间.状态.操作栏需保持词语完整不过行. 2. 当数据为空时,可使用『- -』来表示暂无数据.2.折叠面板(Collapse)折叠面板通过对信息的分组和收纳,指引用户递进式的获取信息,使界面保持整洁的同时…