top

Posts tagged with gui

firefox chrome

firefox chrome

很喜欢Google chrome的配色,所以花了点时间把firefox也装扮成类似的想过,看久了,的确很赞 :)

不知道safari能不能换样式,不然也换成这样 :-)

Yahoo UI Library: Fonts CSS

过去的一段时间里一直很在意YUI(Yahoo UI Library),为了不辜负这段时间的窥视,终于决定要投入实际的应用。

首当其冲的是CSS Fonts,提供跨浏览器(cross-browser)的文字效果控制:

  • 对于 A-grade browser 的完全支持。(关于A-grade browser的概念,看这里
  • 对于多浏览器,提供统一的“文字大小”和“文字间距”显示效果。
  • 合理的字体设定,支持跨操作系统(cross-OS)的字体选择。
  • 对”用户控制字体大小"的良好支持。(在浏览器中用ctrl+滚轮)
  • 支持"Quirks Mode" 和 "Standards Mode"(W3C上对两种模式的对比

如果你明白以上这些生涩的介绍,那么可以立马尝试一下了。如果是看的一头雾水(万分抱歉...),推荐直接看原文介绍

最后有人会说:“我引入了CSS Fonts以后,不能通过CSS校验了...”,关于这个我想说的是:“到底是机器人(Robot)重要,还是人(User)重要,各位自己斟酌了”。

GUI界面设计原则与禁忌

本文列举Jeff Johnson:《GUI设计禁忌》一书中提及的明确针对Web设计和笔者认为对Web设计有参考意义的设计原则和禁忌。设计Web项目时尽量参考一下基本原则,避免设计禁忌,应该能使Web项目的GUI上一个层次。

基本原则

  1. 关注用户及其任务,而不是技术
  2. 首先考虑功能,然后才是表示
  3. 从用户的视角看问题,使用用户的词汇进行描述
  4. 不要向用户暴露实现细节
  5. 使常用的用户任务简单化,不要让用户解决额外的问题
  6. 保持一致性,引导用户的使用习惯
  7. 保持显示惯性,传递信息,而不仅仅是数据
  8. 设计应满足响应需求

禁忌

  1. 同一页面包含重复功能的链接或按钮
  2. 将复选框用作单选按钮
  3. 无初始值的多选一设置
  4. 在非开/关设置中使用复选框
  5. 用文本框显示只读数据
  6. 单选按钮之间间隔太大
  7. 属性标记对齐方式不一致
  8. 当前无效的控件不充分置灰
  9. 显示对用户无意义的错误提示
  10. 不同的类型页面窗口显示相同的标题
  11. 窗口的标题和调用的命令不一致
  12. 要求用户输入随机数
  13. 相似的功能却有不一致的用户操作界面
  14. 取消按钮无法真正取消操作
  15. 网站结构反映公司的结构或网站升级的历史
  16. 返回按钮不能达到预期的目的
  17. 搜索选项过多,过度复杂
  18. 使用容易被忽略的隐藏的图片链接
  19. 需要向下滚动才能看到当前页的重要信息
  20. 图片按钮对鼠标按下操作没有视觉变化
  21. 无意义的虚假进度条
  22. 执行长时间的任务时鼠标指针不显示成忙状态
  23. 不考虑用户可能的人为的错误输入
  24. 认为好的UI就是漂亮的UI
  25. 盲目错误的使用页面模块化设计

来自:隐居者的豆腐店

 1