《UI黄金设计法则》读书笔记

本书讲述了100例不同的产品的UI设计,每个例子分为最佳设计经验与准则和用户体验要素,然后还举一个例子。讲述的内容也许在UI设计师看来很平常,但是我觉得对于作为一名程序员来说还是很有启发的,因为许多其实你只是知道一些,但是要你用文字描述出来你却不知道怎么描述,所以很多时候都是变成了你仿照某个网站做一下。但是有些大网站的产品或者页面其实并不能完全仿照,内容不同,用户不同,另外市场占有率不同。另外在小公司没有什么UI设计,很多时候前台后台页面都是一个人写,虽然一般都是说功能实现就行了,但是页面也要做的好看,用户体验良好,这也是现在前端工程师越来越值钱的一个原因吧。100个例子太多了,许多也过时了,就记录了一些觉得在工作中经常接触到或者以后可能会接触到的,记录下来,没事的时候看一下,然后写页面的时候注意一下,

网页用户界面

最佳设计经验与准则

  • 以主页为基准,建立标准的层级结构。
  • 将每个页面的内容按照网格形式设计成规则的多个行和列。
  • 保持布局的一致性。
  • 将大版面的内容或过于复杂的任务分解至多个页面显示。
  • 把导航的选项限制在六个以内。
  • 使用有意义的图标、色彩和蚊子来帮助用户。
  • 为长时间的后台服务提供用户反馈。
  • 根据可达性原则确定最大用户访问量。
  • 谨慎使用能吸引用户注意的技巧。

用户体验要素

  • 使用优化过的高品质图片和图形。
  • 支持用户快速浏览信息块内容。
  • 提供针对应用程序的特定任务流程。
  • 使用醒目的菜单和衔接。
  • 避免页面刷新和持续的动画。
  • 使用准确高效的文字表达。
  • 力求简洁并且善用留白。
  • 用富有美感的色彩、视觉提示和图标来建立更加丰富的布局。

网站

最佳设计经验与准则
设计网站时要关注与用户的首要任务,规划网站内容,吸引访客,支持尽可能多的浏览器和平台。

  • 标志和公司名要醒目。
  • 把标志颜色作为网站的配色主题,最多使用3种颜色。
  • 创建信息丰富的网页标题、统一的头文件,规划处标志区域,页脚和导航。
  • 通过良好的背景色对比平衡页面中的内容、图片与留白。
  • 给出清晰的标签和网站架构导航。
  • 提供有意义的衔接标签,用统一的颜色主题加下划线区分已访问/未访问衔接。

用户体验要素

  • 注意网站的效能,页面加载时间应控制在10秒以内。
  • 支持多种浏览器。
  • 通过论坛、建议和反馈等功能来收集浏览者的意见。
  • 如果提供搜索功能,保证它在显眼的位置并支持错误拼写。
  • 允许调整文字大小,并提供打印选项。
  • 避免弹出式窗口、框架和插件。
  • 参考无障碍网络设计指南。

主页

主页是用户访问网站时首先加载的默认页面。它用来欢迎用户并提供相关信息和服务,扮演着入口和内容索引的角色。通过它可以访问网站所有的内容。主页的设计目标是吸引访问使用网站的信息、产品和服务。

最佳设计经验与准则

  • 在页面的视觉层次上使用独特的设计。
  • 重点强调与用户相关的内容,采用以用户为中心的设计。
  • 使用简单、清晰、易于理解的内容,避免使用缩写、感叹词和全部大写的英文字母。
  • 避免页面滚动,把重要内容固定在滚动区域上方显示。
  • 避免使用需要安装浏览器插件的文件,如PDF和Flash文件等。

用户体验要素

  • 清爽悦目、机制简约的设计。
  • 保证用户能很快找到并使用帮助功能。
  • 避免采用带有纹理的/平铺式的背景。
  • 清晰可见的联系信息。

个人网站

个人网站是一个人在网络上的名片。它可以是独立的页面、静态网站,也可以是个人日记或博客。可以是一个带有简历和工作经验介绍的网站。可以当作是展示个人风采的窗口,也可以当成网络上的求职申请渠道。

最佳设计经验与准则

  • 把姓名作为标志——这是你的个人品牌符号。
  • 把网页标题作为快速访问信息,方便被搜索引擎搜到。
  • 对简历和其他需要下载的文件,使用不带空格的文件名称。
  • 使用易读的格式化字体、标题和项目符号。
  • 添加能体现个人风格特点的照片、整数和奖项的扫描件。

    用户体验要素

  • 在主页的第一屏上写些能让人眼前一亮的东西。

  • 能轻松访问联系信息。
  • 测试所有的衔接和文件下载是否可用。
  • 不要使用框架、广告条和弹出窗口。
  • 未完成的页面不要提供衔接,不要出现“正在维护中”之类的页面。

博客

最佳设计经验与准备

  • 创建具有吸引力的自定义页眉和层次分明的主题设计,实现独特的视觉感受
  • 使用用户熟悉的字体,保持文字格式整齐、可读。
  • 为网站页面和搜索框使用浅色背景。
  • 使用不超过1024像素的布局,尽可能支持更多的电脑浏览。
  • 提供显示日历、日志归档和最近动态的侧边栏。
  • 设计引人注意的“联系”和“订阅”衔接,使得访客能快速做出行动。

用户体验要素

  • 优化博客主页使用的图片,以提升加载速度。
  • 使用简单易用的导航,页面不要太长,以提升加载速度。
  • 限制网页广告和基于Flash的富互联网应用的数量。
  • 在简介页面提供做着的照片和真实的人物小传。
  • 允许实时共享和评论。

单页网站

单页网站是网页设计的最新趋势。此类网站采用的是垂直滚动的长页面,通过锚点衔接导航到页面的不同位置。

最佳设计经验与准则

  • 单页网站中普遍应用的内容包括:顶部的欢迎区、照片集、简介、服务和推荐。
  • 使用标准的两道三色的配色方案和易读的文字内容。
  • 让标志和导航相对位置固定。
  • 给页面中的联系信息配上地图。
    单页网站的目的在于提供更好的用户体验

用户体验要素

  • 如果需要展示很多图片,请使用幻灯片演示。
  • 确保返回顶部按钮始终处于正常状态。
  • 为内容使用“显示/隐藏”和“显示全部/部分”的选项,以实现更好的可用性。

内容管理系统

最佳设计经验与准则

  • 提供简单并给予网页的访问方式。
  • 提供灵活的内容编辑方式和简单的工作流程来发布内容。
  • 可以自定义网站主题、背景和风格。
  • 允许管理者改变网站主题和风格。
  • 用所见即所得的编辑器来预览更改的内容。

    用户体验要素

  • 提供用来管理所有页面和内容的操作面板。
  • 为创建和管理内容提供易于使用的界面。
  • 支持在发布之前预览内容。
  • 允许快速发布和定时发布。

WordPress主题

最佳设计经验与准则
用户对于WordPress主题的期望是美观以及可定制。

  • 从最基本的两栏火三栏布局式主题开始。
  • 使用流动式布局,以适应不同浏览器的窗口的大小。
  • 提供改变页头颜色和背景图片颜色的功能。
  • 在侧边栏恰当地使用小工具、标签云和RSS。
  • 保证用户能轻松添加访客统计小工具和网页广告。
  • 在标头模板中提供搜索引擎优化(SEO)元标签。

用户体验要素

  • 主题采用两色或三色配色方案,内容使用可读性强的字体。
  • 提供带有不同语言的国际化和本土化主题。
  • 使用HTML、CSS和PHP编程时注意编码规范,便于开发人员维护。
  • 针对特定网站类型(如教育、摄影)提供主题。

面向服务的架构(SOA)设计

最佳实践与设计指南

  • 以简洁的用户界面上清晰地定义所提供的服务。
  • 在托管服务的网页中使用中性主图。
  • 为网络服务提供所有的API建立详细的帮助页面。
  • 在网络服务页面上提供基本的定义和选项。
  • 支持在网络上对表单进行测试。
  • 通过向网络服务的URL传递参数的方式访问服务。
  • 用XML、JSON或XHTML等形式显示服务结果。

    用户体验要素

  • 清晰地说明API的使用方式

  • 利用附带数据的表单测试样本为用户提供帮助

商品目录

最佳设计经验与准则

  • 为产品创建简洁美观的展览列表(网格视图)或垂直列表(列表视图)。
  • 为用户提供友好和智能化的搜索服务,提供关键词、型号、类别等选型。
  • 将物品按类目和品牌进一步分类,以促进用户继续浏览。
  • 用列表视图、网格视图(48)和大网格视图(24)统一各个页面的产品展示方式。
  • 通过提供产品信息、产品缩略图、产品价格和是否可购买等选项帮助使用者选购。

用户体验要素

  • 快速响应是十分重要的,所以默认列表项数应尽可能少,针对小带宽不超过24项。
  • 保证浏览和搜索所得结果的相似性,减少体验过程中的混乱感。
  • 允许用户缩小搜索范围或者在搜索结果中继续筛选。
  • 干净、整洁、专业的布局能赢得购物者的信任。

产品页面

最佳设计经验与准则

  • 使用两栏布局——左边显示图片,右边显示其他信息。
  • 在一个页面显示产品的所有信息,这样用户就不会浪费时间来回寻找。
  • 为产品信息使用项目符号列表,以便快速访问。
  • 通过面包屑导航可以返回产品目录,是用户可以选择其他商品。
  • “添加到购物车”按钮应足够明显,以鼓励消费者购物。

用户体验要素

  • 为产品配上高质量的照片,在突出位置显示。
  • 提供不同角度的产品照片和更丰富的观察视角。
  • 向下滚动或把信息显示在同一个页面的多个选项卡中,这样可以避免重新加载页面。
  • 使用“添加到购物车”而不是“购买”按钮。
  • 用户生成内容(UGC)能够提升用户对网站的信任程度,提供用户评级和评论功能。

购物车

最佳设计经验与准则

  • 使用醒目、美观的结账按钮,鼓励顾客购买。
  • 为购物车页面使用网站统一的配色方案,在页面顶端提供清晰可见的导航栏。
  • 计算预付款总额,创建清晰明了的购物总览。
  • 在购物车页面显示可以点击的产品缩略图,便于顾客重新考虑。
  • 用空购物车为第一次购物的访客演示如何购物。

用户体验要素

  • 提供简洁的增加或减少购物车中商品的办法。
  • 购物车界面要简洁,消除一切干扰信息。
  • 告知用户产品所提供的安全性保障。
  • 浏览更多商品时,在页面右上角提供购物车的快速预览。

支付

最佳设计经验与准则

  • 提供进度指示器(进度显示),告知用户目前付款流程的进度。
  • 在付款流程中使用没有任何干扰和其他衔接的导航,这也成为封闭式付款。
  • 保证用户随时可以查看购物车中的信息。
  • 为当前客户提供是否登陆到账户的选项。
  • 为新用户使用免登陆付款或者更好的“开始付款”选项。
  • 为订单汇总页面提供“购买”按钮以便于消费者进行支付。

用户体验要素

  • 在线聊天可让用户即时获得帮助。
  • 使用更少的步骤和默认选项。
  • 对于一次性的购买行为,单页的付款流程更优。
  • 重视买家对安全性、送退货和售后服务的关注。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇