Archive

Archive for the ‘UI 界面’ Category

网页设计趋势

January 26th, 2010 莱曼 No comments

网页设计是一个急速发展的新媒体,它的快餐式文化,使得网页设计在不断的尝试更新的设计理念,带给用户更多新鲜感。在过去的几个月,2009网页设计10 大新趋势被确定。在这概况,你会发现审查每个趋势都有更加具体的举例,从中带给你更多灵感,激发你的下一个项目。

1. Letterpress 凸版效果

在我们的观察中,一个意料之外的趋势是,凸版效果(Letterpress,也就是我们的篆刻中的阴文效果)。这样的趋势,可能是因为一个简单的原因,因 为这个技术很少被人使用。我们发现这种技术通过不同的样式应用在不同的网站上,多位在线服务网站。

2. Rich UI 交互式用户界面

令人感到欣喜,现代的网站用户界面已经逐渐变得更漂亮和更加易用。过去的几年中,这些基于网页的应用有了惊人的进步,这些交互式用户界面越来越像传统的桌 面应用了。Ajax以及Flash技术的大量使用提供了用户各种非常炫目,强大的网页应用。

更看到一些特别之处,这些年我们发现网页上有了更多的空白空间,页面元素间的间距也变得越来越大。我们也观察到,越来越多的站点开始在页面上提供直观的用 户动作响应。比如,页面上的按钮会根据用户的动作,比如点击响应不同的状态表示“正常”和“按下”状态。而且很多网站开始根据不同的用户产生不同的响应。 所以我们断言,自适应用户界面将会在2009年流行起来。

3. PNG透明图片

PNG透明图片效果,尽管不被古老的IE6支持,但似乎在去年变得流行起来。但是这种半透明的背景效果却是设计师们一直希望拥有的特性。这种背景通常被用 在头部和页脚处,但是有一些设计却跳出了这种窠臼。

4. 大尺寸的文字排版

在过去的文章中我们介绍过很多出色的大尺寸文字排版例子。在2009年,这样的潮流将继续流行下去,尤其是设计师网站,个人Portfolio网站以及在 线服务类网站,将会采用这样的方式传递给用户最重要的信息。

这样的效果一般会将字号控制在36px以下,设计师们投入了更多的精力在文字排版的细节上,由此可见,网页将会变得更加漂亮,更加一致以及看上去更加让人 可信。

5. 字体替换技术

设计师花了非常多的精力在页面排版上,同样的也花了很多精力在字体选择上,除了传统的那些经典字体,(译注:也是我们仅有的安全选择)很多设计师开始采用 字体替换技术,也就是我们之前有提到的(sIFR)。

这些字体能大大提供网页的视觉效果,但是在中文世界中,这项技术遇到了前所未有的难题,汉字不是拼音文字,一个字体就可能有几兆,根本无法简单的使用这些 技术来替换,也许文字图片替换法是目前中文的唯一选择。

6.​模式窗口(LightBox技术)
模式窗口技术,作为第二代弹出内容技术。模式窗口(LightBox技术介绍)能够很好的代替原来的Javascript弹出窗口,提 供更加友好的用户体验,并且引导用户的关注点集中到最重要的区域上来。通常由用户的点击触发,类似于传统的桌面应用。多数情况下,这些弹出窗口都带有深色 半透明的背景和一个关闭按钮。

7. 多媒体模块
随着宽带的普及,现在的用户已经能够接受更多的内容,所以设计师们能够利用这样的契机使用一些更加吸引人的展示方式。因此很多网站开始引入多媒体内容(比 如视频和屏幕录像)。这有助于迅速有效的让用户消化接受你想传递的信息。

这些视频能够很好的讲解你的网站的每一个步骤,不再需要多次点击,搜索,或者学习如何导航。通常这些视频长度都不会太长,但是内容要保持完整。

注意,绝对不能让这些多媒体内容成为你网站的全部或者是必不可少的部分,毕竟不是所有的用户拥有良好的网络条件,抑或是有些用户并不希望这种形式,有可能 他正在机器上收听音乐或其他视频。

8. 杂志风格样式
在博客类网站设计中,我们发现一个有趣的现象是很多技巧都是取自于传统(印刷)媒体设计。包括文章的组织,页面的排版,插图甚至于文字的对齐方式都和传统 印刷媒体越来越接近。Grid-Based(网格化)设计方式在产品网站,博客以及个人工作室网站得到了广泛的应用,但是在企业站点或者在线商店中还未有 出现。

9. 幻灯片形式

Carousel,也就是幻灯片导航形式,内容水平或者垂直滚动。通常有两个导航元素来控制滚动方向,以及滚动内容。

这种形式的好处是,用户可以不用多次点击来搜寻他们感兴趣的内容,可以快速的通过滚动幻灯片来浏览希望他们注意的内容。这种形式多用于娱乐站点,或者是一 些大型博客。是一种非常吸引眼球的展示方式。

10. 内容介绍模块

页面的左上角是网页上最重要的一块地方,因为最吸引用户的眼球。所以我们可以将最重要的信息放在那里展示,用户也能在第一时间获取这些信息。

对于很多个人工作室网站,或者是产品类的网站,都很好的使用了这个区域来展示内容介绍,相反在博客或者是在线商店类网站上几乎看不到这种方式。

Categories: UI 界面 Tags: , , ,

中文网页阅读方式

August 12th, 2009 莱曼 No comments

  1. 正文字体的尺寸应该使用固定的偶数像素单位,如 12px,14px,16px 等,一个例外情况就是 15px 像素也是相当不错的正文字体的尺寸。由于中文 Windows 操作系统及部分的 Linux 发行版使用的是像素字库,因此,这几个尺寸的字体在显示效果上最佳。而在 Mac OS X 上,因为 Mac OS X 使用的是矢量字库,则在各种尺寸下显示效果都不错。另外就是,Mac OS X 的中文矢量字库中内嵌了 12px 的像素字库。
  2. blockquote、ol、ul 等 HTML 元素内的文字应该在顶端和尾端留出至少 10px 的空白,在左端留出 20px 左右的空白,右端 10px 左右。在 CSS 语法中这些空白应该使用 margin 方式设置,padding 方式不提倡使用。padding 可以用来实现其他视觉效果。
  3. 不要随意在正文和标题中使用拉丁等宽字体,除非是为了一些艺术上的用意。拉丁等宽字体应该用在和模拟打印制品或者程序源代码有关的场合。
  4. 不要在任何地方强制指定使用任何的艺术中文字体,比如“魏碑”之类,这将在超过一半以上的计算机上,尤其是非 Windows 操作系统的计算机上不会显示出任何效果。
  5. 应该对大部分文字的 line-height 属性进行强制指定,一个经验是,对于正文文字,line-height 数值可以指定为这些文字的 font-size 的像素值的 1.6 倍左右。如果是标题文字的话,1.3 倍左右。
  6. 中文正文及标题中出现的标点符号应该使用全角方式输入。
  7. 中文正文及标题中出现的英文及数字应该使用半角方式输入,并且在左右各留一个半角空格。如果这些这些半角英文及数字的左边或者右边紧接着任何的中文全角括号或者其他标点符号的话,则不需要加入半角空格。
  8. 中文全角空格应该只在标题处使用。此外,在 Web 上的文字的正文的段落开头是否使用两个全角空格是个人喜好问题,反正我不喜欢用,因为这些全角空格有些浪费存储空间,且对快速扫描式的阅读没有太大帮助。
  9. 在 Web 上的文字,是被人们用眼睛来扫描的,绝大部分都不会被人仔细阅读。
  10. 中文字体的粗体和斜体显示效果不推荐使用。在大部分非 Windows 操作系统上,这些效果都不被字库或者浏览器支持。而在 Windows 操作系统上,这些效果也不够理想。粗体中文显示效果在 Windows 操作系统上会让部分笔画连接在一起而使得文字难以被辨认,而斜体中文显示效果则会使得部分笔画消失,也非常难以被辨认。如果一定要使用此二种效果,则要么 通过 CSS 的 font-weight 方式指定,要么通过 strong 和 em 标签,而不要使用 b 和 i 标签。
  11. 中文的段落与段落之间应该留出一个完整的空行。即每个段落使用一对闭合的 p 标签在不加 CSS 时候的效果,或者是使用两个 br 标签时产生的效果。注意,这个空行的高度会受到 line-height 的影响,因此不要把 line-height 设置为太高的数值,否则将使得两个段落之前的视觉联系减弱,导致影响阅读时候的思路连贯。
  12. 如果文字是要被通过 RSS 输出的,则可以考虑在其中加入一份内嵌样式表,对于 ol、ul、blockquote 等元素的样式尤其需要控制。这样可以保证即使文字被显示在其他网站,其样式也依然可以保持统一,如果没有被聚合器过滤 HTML 标签的话。

Categories: UI 界面 Tags: ,

GUI设计禁忌

August 12th, 2009 莱曼 No comments

本文列举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、盲目错误的使用页面模块化设计

Categories: UI 界面 Tags: , , ,
SEO Powered by Platinum SEO from Techblissonline