UI学习笔记.pptx

UI学习笔记目录catalogues1Web 端的UI学习笔记-------------------------------------- 03-31----------------------------16-23 ---------------------------------- 28-32---------------------------------- 03-04---------------------------------- 24-27---------------------------------- 05-1521543网页浏览模式网站界面的功能案例分析网页交互网页布局方式App端的UI学习笔记2---------------------------------- 33-483214手机界面常用布局移动布局设计原则移动UI设计原则案例展示------------------- 37-46------------------- 35-36------------------- 33-34------------------- 47-48网站界面的功能1. 引导用户2. 呈现内容间的关系3. 建立情感联系21.引导用户?网站对用户的引导，就像暗中一只无形的手，会指引用户通过点击等操作按钮浏览网站，了解信息，而不会带给用户压迫感。2.呈现内容间的关系 按照一定的布局去展示网站的主次内容优先级。譬如说在百度首页，有哪些信誉好的足球投注网站与推荐阅读导航便存在一个主次的关系，有哪些信誉好的足球投注网站框应该重点显示，所以居中而且大块显示3.建立情感联系 人们去餐厅用餐，其实不止把餐厅当做一个解决食欲的地方。他们会关注餐厅的场地，氛围，菜式甚至是一些独特的情调(譬如韩寒的“很高兴遇见你”餐厅)，他们会在这里谈论一些奇特的事情，而不仅仅只是菜式或者是胃口。同样道理，用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。1网页浏览模式2网页浏览模式1. Z 模式 就像你的眼睛会更快关注到快速移动的物体，在现实生活中，大部分的人都会被页面中的焦点所吸引。在这里主要介绍两种比较常见的页面浏览模式。2. F 模式?Z模式的浏览模式在于网页内容主要不是文字的页面。不论是否因为这里有个菜单栏，还是就仅仅因为从左到右自上而下的阅读习惯，用户首先关注的页头水平方向上的内容。当视线抵达底部时，又遵循着从左到右的习惯模式，重复再水平扫视页尾的最底部的内容。1Z 模式Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会稍差。当然，这些都不是绝对的。当Z模式简化布局，就可以增加转化率，下面这些是可以去简化的地方：背景——运用独立的背景能将用户的视线范围锁定在你的框架内容里。要点1——你的LOGO放置的首要位置。要点2——增加一个颜色鲜明的辅助操作指令，帮助用户遵循Z路线浏览模式。页面中心——页面的中心独立于页头和页尾的部分，引导用户Z路线浏览视线。要点3——增加可以从正在浏览的位置移动去到底部的图标，也就是能随时抵达最终目标。要点4——Z模式最底部的水平线上的内容，这将是提供给用户首要操作的最佳位置。百度校招的网站，就很符合Z模式的浏览习惯如果页面比较长的话，可以一直重复Z模式，就像你在右图中看到的印象笔记网站，一开始这个页面就有一个注册按钮，通过水平位置的浏览，用户已经获悉了这一信息，下拉会出现产品的卖点，这些卖点的展示就是遵循重复着Z模式的最佳例子，直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森发表了一项《眼球轨迹的研究报告。研究表明，浏览者打开网页后，按照下面的习惯形成F形网页浏览模式：2F 模式F模式F模式 第一步：水平移动 浏览者首先在网页最上部形成一个水平浏览轨迹。 第二步：目光下移，短范围水平移动 浏览者会将目光向下移，扫描比上一步短的区域。 第三步：垂直浏览 浏览者完成上两步后，会将目光沿网页左侧垂直扫描；这一步的浏览速度较慢，也较有系统性、条理性F模式主要在一些以文字为主的网站出现，例如博客。F模式就是指用户通常会沿着左侧垂直浏览而下，先去寻找文章中每个段落开头的兴趣点，这时，如果用户发现了他喜欢的，他就会从这里开始水平线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。根据以上现象可以总结出F模式的特点：-用户极少逐字阅读文字。每个段落的开始两个字最为重要，这将决定内容是 否能留住用户。-初始段落，副标题和要点都要保持醒目。纵向扫描以对比：信息为第一维度要关注的信息， 用户寻找的是最重要而且有差异化的信息，用户扫 描的速度非常快。用户对比中会产生“定位”，从 而产生水平阅读。横向扫描用以判断：信息为