UI学习笔记技术总结.pptxVIP

UI学习笔记;;2;1.引导用户 ??网站对用户的引导，就像暗中一只无形的手，会指引用户通过点击等操作按钮浏览网站，了解信息，而不会带给用户压迫感。 2.呈现内容间的关系 ? 按照一定的布局去展示网站的主次内容优先级。譬如说在百度首页，搜索与推荐阅读导航便存在一个主次的关系，搜索框应该重点显示，所以居中而且大块显示 3.建立情感联系 ? 人们去餐厅用餐，其实不止把餐厅当做一个解决食欲的地方。他们会关注餐厅的场地，氛围，菜式甚至是一些独特的情调(譬如韩寒的“很高兴遇见你”餐厅)，他们会在这里谈论一些奇特的事情，而不仅仅只是菜式或者是胃口。同样道理，用户会因为和你的网站内容产生的情感联系而接受网页界面或交互的小小瑕疵。;;Z 模式;;百度校招的网站，就很符合Z模式的浏览习惯;如果页面比较长的话，可以一直重复Z模式，就像你在右图中看到的印象笔记网站，一开始这个页面就有一个注册按钮，通过水平位置的浏览，用户已经获悉了这一信息，下拉会出现产品的卖点，这些卖点的展示就是遵循重复着Z模式的最佳例子，直到最下方的支付选项就抵达了Z模式的最尾部那个水平线。;美国长期研究网站可用性的著名网站设计师杰柯柏·尼尔森发表了一项《眼球轨迹的研究报告。研究表明，浏览者打开网页后，按照下面的习惯形成F形网页浏览模式：; 第一步：水平移动? 浏览者首先在网页最上部形成一个水平浏览轨迹。? 第二步：目光下移，短范围水平移动? 浏览者会将目光向下移，扫描比上一步短的区域。? 第三步：垂直浏览? 浏览者完成上两步后，会将目光沿网页左侧垂直扫描；这一步的浏览速度较慢，也较有系统性、条理性;主要在一些以文字为主的网站出现，例如博客。F模式就是指用户通常会沿着左侧垂直浏览而下，先去寻找文章中每个段落开头的兴趣点，这时，如果用户发现了他喜欢的，他就会从这里开始水平线方向的阅读。最终结果就是用户的视线呈F型或者E型进行浏览。;根据以上现象可以总结出F模式的特点： - 用户极少逐字阅读文字。 每个段落的开始两个字最为重要，这将决定内容是 否能留住用户。 - 初始段落，副标题和要点都要保持醒目。 纵向扫描以对比：信息为第一维度要关注的信息， 用户寻找的是最重要而且有差异化的信息，用户扫 描的速度非常快。用户对比中会产生“定位”，从 而产生水平阅读。 横向扫描用以判断：信息为第二维度信息，信息可 以没有差异化，用户会降低扫描的速度以获取更多 有用的信息，帮助自己做判断，要不要点击到详情 页。 ;F模式对于那些嵌入广告的网站是极为有用的，即使有了广告，也不会影响到内容。只要记住，内容为王，导航可以让用户更深入地浏览下去。在所有浏览模式中，F模式就是一个引导路线图，而不仅仅是一个页面。因为，F模式的网站除了顶部展示区外，其他的内容会显得更平淡。;但是这种阅读模式有利也有弊： 这样一来，最有价值的内容只能放置在页面顶部了。有些俗套 文本内容无法有效的引起用户注意，用户甚至连摘要都懒得读，看看标题就“过”了网页过分注重对“标题”和“图像”的包装，不符合内容至上的原则 在采用F式布局进行设计师，很多设计师感觉自己不像是设计师，而想是制造噱头的“广告商”。太具备功利性，只追求一时的浏览量，不遵循“内容为王”的原则，很多用户第一次可能感觉不错，但是看了内容后大呼上当，可能下一次他们就不会再次访问该网页了。 ;;栅格系统的设计原理及应用;;从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 ?的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：;在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……;三分法则;黄金比例法则;*总结—— 从浏览模式来说，Z模式几乎可以适用到任何的网页交互，Z模式的优点就是简单。如果你的网站内容很多并且很复杂的话，那么用这个模式，效果就会