首页

表格的UI交互模式指南

蓝蓝

许多人都认同这样一个现象:表格虽然是用户界面设计中的一个重要部分,但是它们却经常会被忽视。表格应该显示让用户更易读,更易扫视,更易比较的结构化数据,但在很多情况下,表格数据却显得模糊不清。这就是很多人不喜欢表格的原因。

用户的日常工作经常使用表格,但是谁会需要让他们崩溃的东西呢。要改变这样的现状,下面给出一些使表格易用的指南。


行交替样式Alternating rows styling

这是很明显的,但是事实如此吗?看看今天的WEB应用,你就会发现很多并不适用。因此,行交替样式并不明显,这就是把他列为第一个来阐述的原因。

在数据较多的多行多列表格里用不同样式交替显示不同的行,这会提高用户区分数据的能力。可以采用背景色或者背景图片,如果采用背景色,背景颜色应该比页面颜色浅或者深一点。图像背景应该选择和符合整体配色方案的图片。也可以把背景色和背景图组合应用于表格边框。表格的header和footer部分应该易于识别,可以采用比表格行深或者浅的颜色。

 

BlinkCampaign的表格行采用了浅一点的亮绿色,header采用了稍微暗一点的绿色。

 点击查看原图

15个优秀的互联网应用表单设计

蓝蓝

从某种意义上来说,的确如此。一个好的表格应该以易于理解,简单明了的方式传递大量的信息。真正的重点应该 放在信息上, 对表格的过度设计会抵消这种作用。从另一方面来说,巧妙的设计不仅可以使一个表格更具吸引力, 而且可以增加可读性。 

今天我们来看看提升表格功能和美观的几种方式。我们经常会在网上的价格页上看到表格的应用,因此主要以该种表 单为例。请记住这些原则可以应用到任意类型的信息列表上(不仅限于 <table> ). 

 

垂直,水平或矩阵?Vertical, Horizontal or Matrix?

一如以往,我们从最明显的地方开始。第一步是决定表格的整体结构。结构取决于呈现数据的类型和复杂性。选择 垂直的列还是水平行,通常取决于个人偏好。大致规划下表单的内容,然后决定采取哪种方法能更好地传递信息。很显然,如果信息包含多变量,那么选择矩阵来表示。下面分别以几个简单案例来开始。

垂直

点击查看原图

ArcGIS界面欣赏:国外gis界面设计欣赏截图

蓝蓝

因为给中兴通公司设计相关gis界面,蓝蓝收集的Flex生成的,arcgis界面截图。蓝蓝设计更多gis案例见http://www.lanlanwork.com/bs.html。

设计新用户引导页的一些思路

蓝蓝

一个新的网络产品,或者一个全新的功能要想吸引用户的使用兴趣,就需要让用户在刚一接触到的时候能够快速地了解它是什么,能做些什么,并且能马上开始一些简单的操作。如果看了很久还没弄明白这些,那么很可能就彻底放弃了。

所以,设计新手用户引导,就是设计用户前一、两次使用产品时的体验,设计目标是让新手用户快速、无痛苦地成为中间用户。

Google HTML5 训练营

蓝蓝

先简单介绍一下这个训练营的活动流程:
   1:00 – 1:30 注册
   1:30 – 2:30 HTML5 技术剖析
   技术讲座1 —— Google 工程师
   技术讲座2 —— 特邀嘉宾(李靖威、李继成,就职于人人网)
   2:30 – 3:00 宣布竞赛规则,开始组队
   3:00 – 6:30 作品创作 / 提交
   6:30 – 7:00 作品展示
   7:00 – 7:30 评奖、颁奖

  讲座部分,先是Google工程师寒蕊MM跟我们分享了些HTML5的新技术概况,其中大致包括:sessionStorage localStorage Web SQL DateBase Indexed DB ,寒蕊MM还专门写了篇关于IndexedDB的文章《客户端数据存储》 ,文章用实例的方式讲了Web Storage(localStorage)、Web SQL Database 和 Indexed Database的用法。

  其中Web SQL Database虽是HTML5的技术,但由于某些原因,W3C组织(Web Applications Working Group)已不再维护这项技术,也就是说虽然目前Chrome、FireFox新版本浏览器支持这项技术,但不一定未来的版本还会支持。以下为w3c官网的声明:

iBooks发布首次重大更新,有啥新功能?

蓝蓝

21日,苹果公司对iBooks进行了第一次重大更新,发布了iBooks 1.1版。新版iBooks提供了许多改进的新功能。一起来看看是哪些功能吧:iBooks 1.1版提供了红色书签功能

精选31个网站界面设计实践教程

蓝蓝

为网站创建有效的导航对于网站浏览者的浏览及导航起到至关重要的作用。我们为您精选了以下时尚且简单的导航设计教程,当您掌握这些教程之后,进行各种调节及变化将变得非常容易。

1. Retro Dark Blue Header Design

教您如何设计一个深蓝色复古圆角网站页头。

网页-设计-教程

2. Wii Web Header

  教您如何设计一个WII风格的网站页头。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档