文档介绍：UI学****笔记
目录
catalogues
1
Web 端的UI学****笔记
-------------------------------------- 03-31
1
网站界面的功能
---------------------------------- 03-04
1
移动UI设计原则
------------------- 33-34
2
App端的UI学****笔记
---------------------------------- 33-48
2
网页浏览模式
---------------------------------- 05-15
3
网页布局方式
---------------------------- 16-23
4
网页交互
---------------------------------- 24-27
5
案例分析
---------------------------------- 28-32
2
移动布局设计原则
------------------- 35-36
3
手机界面常用布局
------------------- 37-46
4
案例展示
------------------- 47-48
2
网站界面的功能
1. 引导用户
2. 呈现内容间的关系
3. 建立情感联系

  网站对用户的引导,就像暗中一只无形的手,会指引用户通过点击等操作按钮浏览网站,了解信息,而不会带给用户压迫感。

  按照一定的布局去展示网站的主次内容优先级。譬如说在百度首页,搜索与推荐阅读导航便存在一个主次的关系,搜索框应该重点显示,所以居中而且大块显示

  人们去餐厅用餐,其实不止把餐厅当做一个解决食欲的地方。他们会关注餐厅的场地,氛围,菜式甚至是一些独特的情调(譬如韩寒的“很高兴遇见你”餐厅),他们会在这里谈论一些奇特的事情,而不仅仅只是菜式或者是胃口。同样道理,用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。
网页浏览模式
1
网页浏览模式
2
就像你的眼睛会更快关注到快速移动的物体,在现实生活中,大部分的人都会被页面中的焦点所吸引。在这里主要介绍两种比较常见的页面浏览模式。
1. Z 模式
2. F 模式
Z 模式
1
Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏,还是就仅仅因为从左到右自上而下的阅读****惯,用户首先关注的页头水平方向上的内容。当视线抵达底部时,又遵循着从左到右的****惯模式,重复再水平扫视页尾的最底部的内容。
Z模式几乎可以适用到任何的网页交互,Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话,那么用这个模式,效果就会稍差。当然,这些都不是绝对的。当Z模式简化布局,就可以增加转化率,下面这些是可以去简化的地方:
背景——运用独立的背景能将用户的视线范围锁定在你的框架内容里。
要点1——你的LOGO放置的首要位置。
要点2——增加一个颜色鲜明的辅助操作指令,帮助用户遵循Z路线浏览模式。
页面中心——页面的中心独立于页头和页尾的部分,引导用户Z路线浏览视线。
要点3——增加可以从正在浏览的位置移动去到底部的图标,也就是能随时抵达最终目标。
要点4——Z模式最底部的水平线上的内容,这将是提供给用户首要操作的最佳位置。
如果页面比较长的话,可以一直重复Z模式,就像你在右图中看到的印象笔记网站,一开始这个页面就有一个注册按钮,通过水平位置的浏览,用户已经获悉了这一信息,下拉会出现产品的卖点,这些卖点的展示就是遵循重复着Z模式的最佳例子,直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。
美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森发表了一项《眼球轨迹的研究报告。研究表明,浏览者打开网页后,按照下面的****惯形成F形网页浏览模式:
F 模式
2