**1、区分「可点击」和「被选中」的样式**
视觉风格,比如颜色,层次的区分和对比,可以更好地帮助用户使用产品,让用户知道自己处在什么页面,可以跳转到哪些页面。要达到这样的效果,需要将可点击的元素(链接、按钮)、被选中的元素和普通的文字以相同的规则区分开来。
<br/>
<br/>
**2. 尽量使用单列布局**
单列布局能更好地引导用户自上而下阅读,而多列布局则会分散用户的注意力。最好使用有逻辑的叙述来引导用户,并在文末提供一个呼吁用户行动的按钮。
<br/>
<br/>
**3. 对比要鲜明**
好的界面重点突出,与周围的元素区分开。突出重点有很多种方式。你可以让某个元素使用深色调,和其它浅色调元素区分开;还可以为元素增加阴影和渐变来突然对比;最后,你也可以选择互补色(比如黄色和紫色)来提高对比度。综合使用以上方法,就能让重点从其它元素中凸显。
<br/>
<br/>
**4. 精简表单字段**
人类生性懒惰,没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同,在移动设备上打字更是一件苦差事。尽可能删除没必要的字段,只保留那些有必要的。如果真的有很多信息要用户填写,试着将它们分散在不同页面,一页提交后再填写下一页。
<br/>
<br/>
**5.不要放太多链接**
为了满足不同用户的需要,我们可能会在页面上增加一个又一个链接。但如果你的目的是想让用户点击页面下方那个重要按钮,每增加一个链接,都会降低他点击按钮的概率。所以请注意网页上链接的数量,尽可能平衡链接和按钮间的关系。删除多余的链接可以增加用户点击按钮的概率。
<br/>
<br/>
**6.循序渐进地引导,不要直接让用户注册**
与其让用户仓促注册,不如让用户先进行一些体验式的操作,通过这些操作向用户证明产品的价值。这样的初始互动可以向用户展示产品功能,一旦用户看到它们,会更乐意注册。这种循序渐进的引导尽量推迟用户注册的时间,并允许用户在没有注册的情况下进行一些个性化设置
<br/>
<br/>
**7. 不要使用太多边框**
注意力是宝贵的资源,我们在特定时间内拥有的注意力有限。边框可以定义一个非常清楚和准确的空间,但是它们也会吸引和分散用户的注意力。为了不过多吸引用户注意力,在排版时我们可以通过缩小组内元素边距、增加组和组之间边距、使用不同背景色、将文字对齐等方法来划分区域。
<br/>
<br/>
**8. 页面设计尽量保持一致**
当我们按下按钮,或移动滑块,我们期望这些元素的行为和以往见到的一致,要做到一致性,得在很多方面下功夫,包括:颜色、方向、行为、位置、大小、形状、标签和语言等。但要注意,在一些特定场景下打破一致性的做法仍然有价值。不一致的元素或行为会让用户下意识的关注——如果想让用户注意,可以尝试这么做。
<br/>
<br/>
**9. 遵循用户习惯**
<br/>
<br/>
**10.区分视觉层次**
好的视觉层次能够区分页面中哪些元素重要,哪些次要。要做到层次分明,可以从对齐、间距、颜色、色调、缩进、字体大小、元素大小等视觉语言入手,将它们运用得当,用户就能顺畅阅读。层次分明的页面,能让用户放慢速度,从上到下细细浏览。
<br/>
<br/>
**11.将相似的功能放在一起**
将相似的功能放在一起是非常基本的原则。大部分人都知道,刀和叉、打开文件和关闭文件要放在一起。将相似功能放在一起符合逻辑,也尊重人类的认知习惯。
<br/>
<br/>
**12.增大点击区域**
把链接、按钮、窗体的尺寸做大,更容易点击。最好还是把表单字段、按钮和链接做大点。或者可以大小不变,但可点击区域增大。
<br/>
<br/>
**13. 提供解释、说明和提示**
有些事对我们来说显而易见,对用户却未必。典型如文本字段,要求用户输入开放性的内容,所以要提供解释性说明,
<br/>
<br/>
**14.简洁的文案**
用词简练,缩短句子长度。写完初稿后,看看能否在不失原意的前提下让句子更精练。
- 布局
- display:table布局
- display:flex弹性布局
- html
- 1.1关于文字小技巧
- 1.2加载
- 1.3苹果和安卓样式兼容问题
- 1.4结构技巧
- 1.5兼容ie7,ie8技巧
- css
- 1.1内容不够,页面固定在底部
- 1.2 css属性书写顺序
- 1.3font和line-height之CSS代码书写顺序不同,导致显示效果不一样
- 1.4 flex设置成1和auto有什么区别
- 1.5带三角形的对话框
- 1.6css选择器
- 1.6.1通用兄弟选择器E ~ F
- 1.6.2相邻兄弟选择器E + F
- 1.6.3 CSS3结构选择器
- 1.6.4 属性选择器
- 1.6.7 class^=,class*= ,class$= 的含义
- 1.7伪类
- 1.7.1:not(s)
- 1.9inherit和 initial
- 2.0 css技巧
- css3
- 1.2 背景background
- 1.3 transform
- 1.3.1移动translate
- 1.3.2缩放scale
- 1.3.3旋转rotate
- 1.3.4扭曲skew
- 1.4 Transition
- 1.5 animate
- 1.6 calc()
- 1.7 Gradients渐变
- 1.8 backface-visibility
- 1.9 text-size-adjust
- sass知识点
- 1.1sass写法转化
- 1.1.1 sass的转换写法
- 1.2 & 嵌套写法
- 1.2变量
- 1.2.1 默认值
- 1.2.2 全局变量和局部变量
- 1.2.3 嵌套
- 1.2.4 伪类选择器
- 1.2.5变量用井号花括号包裹
- 1.2.6 多个变量一起声明
- 1.3混合宏
- 1.3.1不带参数的混合宏
- 1.3.2传一个不带值的参数
- 1.3.3传多个不带值的参数
- 1.3.4传一个参数的值
- 1.3.5传多个参数的值
- 1.3.6参数变量名后面加...(省略号)
- 1.4文件导入
- 1.5继承@extend
- 1.6占位符%
- 1.7混合宏VS继承VS占位符
- 1.8 @media在sass中写法
- 1.9 @content的作用
- sass基本运算
- 1.1[Sass运算]加法
- 1.2[Sass运算]减法
- 1.3[Sass运算]乘法
- 1.4[Sass运算]除法
- sass函数
- 1.1 @if函数
- 1.2for函数
- 1.3 while函数
- 1.4 each循环
- 函数
- 1.1一些函数的意思
- 1.2if else函数
- 1.3 i++和++i的区别
- 1.4for函数
- UI设计规则
- 1.1字体
- 1.2尺寸
- 1.3 注意点
- 1.4 界面设计注意点