我们要创造出1多万会员同时去完善词条的记录,我们打造成全球最大的中文生活类的百科全书。你的每一次编辑,都会对互联网的发展起到推动作用,同时也是对社会的一种贡献。网站完全是公益性的,赢利不是我们的目的。
口号:我的百科,我来录(百科录)
百科Twitter( follow me )<!--v:2.2-->
|
|
||
vCard is a file format standard for electronic business cards. vCards can contain contact information such as name, street address, email, and telephone number. By providing a way to export your profile as a vCard, chi.mp makes it easy for your friends, family and business associates to add your contact information to their contact or address books, while retaining your privacy preferences.
前段时间在网络上发现最近网络上开始有很多人在讨论栅格化的网页布局,嗯。我也先介绍一下网页栅格化的布局情况吧。
最早提出网页栅格化的设计的人我忘记是谁了,但是应该是网页还停留在780宽度的时候就听说过栅格化的问题。从taobao ued的博客了解到
“1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体和版面进行科学实验的活动,也 是栅格系统最早的雏形。”

嗯。简单说来,网页栅格化解决的问题即是网页如何能最多的分割成为各种整数宽度的问题。。通过看上面的图片大家应该基本可以了解到什么是网页栅格化的设计,以上是950宽度的网页设计。如果把30作为每个单独的单元格的宽度,10作为每个单元格之间的宽度。那么950恰好可以分成24个小列,每个间隔10像素。
因此,这个就是网页栅格化最简单的一个解释了。下面我想说另外一个问题,即使黄金分割。
把一条线段分割为两部分,使其中一部分与全长之比等于另一部分与这部分之比。其比值是[5^(1/2)-1]/2,取其前三位数字的近似值是0.618。由于按此比例设计的造型十分美丽,因此称为黄金分割,也称为中外比。这是一个十分有趣的数字,我们以0.618来近似,通过简单的计算就可以发现:
1/0.618=1.618
(1-0.61 / 0.618=0.618
这个数值的作用不仅仅体现在诸如绘画、雕塑、音乐、建筑等艺术领域,而且在管理、工程设计等方面也有着不可忽视的作用。
如果细心一些的人会发现,黄金分割无所不在,包括拍张照片人物放在画面的黄金分割点上也是一种很好的构图方法。因此,黄金分割是一种公认最优秀的分割比例。
因此如果以一个950宽度的网页为例。最合适的分割比例其实是。
左侧:950× 0.618 = 587
右侧:950 × 0.382 =363

个人觉得黄金比例分割比栅格化靠谱很多,但是如果是一个门户网站,需要很多的小区块分割的网站,你要考虑倒栅格化的化,即是为了以后再分割考虑的化,那两列的比例也应该是最接近的应该是590像素和360像素。
为什么呢?
590 = 14 × (30+10) + 30
360 = 9 × (30+10)
其实这个比例已经几乎等于黄金分割。因此这样的使用比较好。
同时,黄金分割不仅仅体现在网页的栅格化中,还体现在行高(line-height)上,一个网站的文字怎么样的距离才是最合适阅读的呢?这个是我一个困扰了很久的问题。

结果黄金分割很好的解决了我的问题。用中文最常见的12px宋体和14px宋体为例:
最合适阅读的行高是12像素:12× 1.618=19.4 PX
最合适阅读的行高是14像素:14× 1.618=22.7 PX
再举个实际的例子,在豆瓣上目前的行高度是150%,因此12像素宋体是18像素的行高。如果换用1.618的高度。我们对比一下:

非常明显,下面是最合适阅读的一种比例。
就在刚才,我给GMAIL安装了Twitterd插件。
安装完插件后,Gmail提示我要连接Twitter的账号才能使用:
我顺着提示操作下去,就看到了这个页面:
一路下来的英文界面,已经让我相当的头疼了。
但是这两个按钮即使不看文案,也很容易猜出其中的意思。
比起千篇一律的方形按钮,这里的“小箭头”设计真是太贴心了。
在这里它准确的指导了我进行下一步的操作。
在TB UED最新的文章《鸡肋般的文案内容》 里说到:能不说就不说,用优秀的交互来代替文案。
这里可以小补充一下了:优秀的视觉设计也能达到这样的效果。
当我们纠结于这里的文案是”接受”‘,“允许”或者是“下一步”的时候,一个小小的箭头反而最能说明问题。
图形符号的作用是不能小视的,它直观易记,非常便于信息的传递。
我认为在以下3个方面,图形符号能帮助我们改善体验:
从我们学习交互设计相关知识开始,就一直被强调“符合用户的心理模型”。
我们绞尽脑汁掩盖计算机那种难以令人理解的工作模式。
(1)就像是注册:
我们要告诉用户:
线上注册就像你在银行申请开通某项业务一样简单。
遵循一定的操作步骤,就能成功。
更妙的是,还有温柔的银行小妹告诉你:您还差几步就办理成功了。
鬼才关心计算机在后面交换了多少次数据。
(2) 除了操作流,恰当的图形也能对视觉的方向进行引导:
如果这个下拉菜单不是往下,而是往左边展开
应该是一件很让人恼火的事情吧。
阅读图形总比阅读文字来的快。
(1)在提高效率方面,出现的最多的就是反馈图标了。
为了加快用户理解反馈的速度,大部分网站的反馈不仅提供了辨识用的图标,还用颜色做以区分。![]()
![]()
这样的反馈,不需要看完所有文案,一眼就能得到反馈信息。
(2)图形在对比中的优势也是显而易见:

现实环境中,有很多物理对象可以为我们提供隐喻。
虽然说在复杂的交互行为中,合适的隐喻体并不如我们想象中容易找到。
但是对于一些简单的行为模式,使用一些通用图形符号,会节省用户的学习成本![]()
例如上图,左边保存,右边打印。
已经广泛的应用在各大软件界面上。
这种通用的甚至可以说是标准化的功能性图形,对于用户来说,学习成本是极低的。
当然,不排除不合适的图形反而给用户带来困扰的情况。
当我们通过交互方式、文案,找不到合适的解决方式的时候。
不妨看看是不是能通过视觉的手法来解决问题。
就像Twitter那个贴心的箭头按钮一样。
这8项法则是由Ben Shneiderman于1998年提出的
一、力求一致性
例如网站首页需要和每一个下级页面保持一致的风格,导航都要放在屏幕的左上角,具有高度一致性的界面能给人清晰整洁的感觉
二、允许频繁使用快捷键
快捷键表示产品使用的灵活性和有效性,想想每次我们使用搜索引擎的时候是鼠标点击的搜索还是按的回车?
三、提供明确的反馈
出现错误时要明确说出错误的含义,而且需要考虑用户能否理解,比如我们基本上都遇到过HTTP404错误,但绝大多数人能看懂么?
四、设计对话,告诉用户任务已完成
要在用户完成某项任务或操作后进行提示。如果他们在做了很多操作后却得不到反馈,他们就无法知道自己是否达成目标。
五、提供错误预防和简单的纠错功能
例如把某些当前不能点击的按钮设置为灰色,在系统执行时让用户在确认一下
六、应该方便用户取消某个操作
大多数的应用软件都有撤销和恢复的功能,如果用户总是惧怕一失足成千古恨,那样的用户体验可想而知
七、用户应掌握控制权
一般而言用户希望自己去控制系统交互,在执行任务中,用户应该可以随时中止或退出,而不是无奈的看着系统继续
八、减轻用户记忆负担
我们应该尽可能帮助用户避免要求他们记住各种信息,例如各个菜单项之间的逻辑关联,更好的分类就会帮助用户找出哪个功能按钮在什么地方
摘要:本文分享最近使用卡片分类法(card sorting)的变体所进行的一项图标分类研究。其中手段不乏粗暴低劣之处
,权当一种quick turnaround的问题解决思路看吧。

这个PPT的模板用了乐高作为设计元素
原因等会揭晓~~~


随着本司的图标数量越来越多,图标设计师需要建立一个分类体系以进行规范管理和需求审核。他本身已有一个初步分类体系,但考虑到这关系到众多设计师(图标制作需求方),希望集思广益,考虑更多角度,让分类体系更专业,也方便日后的推广与维护。

在与图标设计师沟通后,我制定了以上研究方案。
第一步:通过邮件发出邀请,收集五个设计师的分类。

几个说明:
第二步:由我进行汇总、分析
和谐大法。即采取最简单的逻辑——少数服从多数,以及较为粗线条而非精准的推理(见下)
幸好数据量不多,于是在襄襄脑力支持下,按以下步骤进行了分析——


这样看,很赤果果。

这样看,就能看出规律啦!
对“产品、服务的分与合”的说明:

将混合了服务与产品的设计师的分类代为区分开(用颜色,请对比两图前后变化),然后开始乾坤大挪移工作——


按照和谐大法中的少数服从多数大法。标准块>=4的,视为无争议。


以上积木搬动是为了更好地看出问题以做出分析。

留意最后一行,有一个图标悄悄发生了变化。原有三人将这个图标归入橙色类,另外一人归入“一般提示”类,而该类下只放了两个图标。故被和谐入多数派中,也使这个图标的归类有了定案。

到了这一步,和谐区和争议区已被确定。接着只需看最棘手的。

对争议区进行最后的清理:

到了这一步,我的工作告一段落。于是把所有参与的设计师以及图标设计师(即“标准”分类制定者)召集起来讨论。

讨论重点如上。上表直接引用excel,可即场修改。修改结果如下——

接着,就个人形象、装饰两个分类进行了讨论。整个过程比较流畅高效(个人感觉
)

最后,现场得出初步分类结果,并确定了命名。个人形象单独新建一类“形象”,装饰类归入“提示及反馈”。接着,现场马上对本司现有所有图标进行了分类。
预备做法:
)“其他”用于无法归入任何一类时使用。
实际做法:
由于要分108个图标,分了不到30个大家就大呼受不了,原因包括:
改为集体对每个图标逐一讨论、确定归类,我做记录。没想到效率也蛮高!可能是经历过讨论大家有一定共识了吧。以上从分类到归类的整个讨论过程,耗时1个半小时不到。
最终分类结果如下——

根据对108个图标的归类,结合最具有图标设计专业性的图标设计师的判断,最终做出如上右的分类。描述(即原装饰)被提了出来。
结语:这次研究过程蛮有趣好玩
,跟设计师交流也很开心。但是对于数据量很多的卡片分类如何处理呢?呀,夜深了人静了,滚去睡觉了
下回再写吧,再结合Google AdWords帮助中心一个研究案例。
2



订阅到阅读空间