主要内容
-
WAP2.0网页设计中的交互细节 2010-08-10 22:11
适配竖屏横向尺度，禁止出现横向滚屏 常规QVGA机型竖屏状态下，14号字体，单行仅显示13.5个字。资讯频道的新闻短标题要控制在13字以内才能在一行以内完整显示。标题折行会造成在相同空间承载信息量减少；频繁的眼动容易引起视疲劳；在视觉上带来无序松散的感受。 焦点跳转的频度 对非触屏手机，在不影响功能交互 ... ...
-
手机上的信息架构方式 2010-08-10 09:58
信息架构 即信息的组织结构。它的任务就是在信息与用户之间建立一个通道，使用户能够获取到其想要的信息。一个有效的信息架构方式，会根据用户在完成任务时的实际需求来指引用户一步一步的获得他们需要的信息。 比如我们去饭店点菜、去商场买衣服，要完成这类日常生活中最常见的任务，用户最希望的就是过程简短、不用过多的去思考。所以根据用户的实际需求，这类任务就要采取比较顺畅的架构方式。相反，如果在 ... ...
-
浅谈交互设计规范 2010-08-09 22:52
当产品规模大了之后就需要多个产品设计师协作完成整个产品，由于不同产品设计师之间的设计理念、设计方法、设计习惯的不同，协作完成的产品往往会导致产品一致性差，质量参差不齐。 这个时候会需要一份交互设计规范来规范和指导产品设计，从而保证产品设计的一致性，提升整体产品质量。 本文就来说一说交互设计规范应该包含的一些内容： 一、页面信息规范 页面信息规范主要指页面的静态信息应该遵循的规则，包 ... ...
-
模块标签(Module Tabs)_Yaho... 2010-08-09 11:04
原文地址:http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html 如果页面中可用的空间很有限同时不希望页面刷新,则可以直接在内容上方放一行标签形式的链接,通过这种方式访问内容. 当前激活的面板需要有视觉标识,并且分类标题应该短,同时要小于10个.如果在使用情境中,内容不需要彼此之间同时查看,则可以使用 ... ...
-
社会化浏览器Nexus概念UI设计 2010-08-09 10:20
本来想拿去参加UI AWARD2010的，无奈时间紧张工作太忙，现在才完成设计稿。也罢，就先放这里吧。 主界面： 开始浏览： 浏览网站（社会化页面）： 浏览网站（常规页面）： 重新设计的任务管理器： 简单介绍一下做这个概念浏览器的想法： 一开始只是想做个Chrome浏览器的界面优化版，因为有些 ... ...
-
交互设计的方法 2010-08-04 22:10
长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行，主要是交互设计师和视觉设计师对于交互设计的困惑，以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座；现在把它整理成文，希望与同行切磋，共同进步。 这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心（User-C ... ...
-
如何优化QQ秀-我的收藏 2010-08-04 21:57
“我的收藏”是QQ秀商城购买物品流程中的一个辅助的操作，收藏后，方便再次搭配。就像我们购物一样，把看到喜欢的东西先放入篮子里面，待买单的时候再做筛选。所以，在愉悦的购买体验中，收藏就显得比较重要。 先看看优化前后，收藏页面的差别： 原流程存在的问题： 点击物品收藏后，必须跳转到一个新窗口进行预览或操作。假如用户收藏2件物品，就要点击2*2次。（ ... ...
-
进度条(Progress Bar)_Yaho... 2010-08-03 19:13
这篇放到草稿里好久了… 最近在忙着来杭州,杭州之后的安顿,今天终于可以完成了… 原文地址:http://developer.yahoo.com/ypatterns/navigation/bar/progress.html 进度条(或进度表)可以帮助用户对过程的长度和步骤有个预期,并且知道自己当前在哪个步骤.也被称作”进度指示器(Pr ... ...
-
上一篇？下一篇？ 2010-08-03 15:26
一篇博客文章页中，正文的下面总会有两个操作“上一篇”和“下一篇”。每次看到这两个链接，我都要思量半天，“上一篇”究竟指的是新的一篇还是旧的一篇。 问了两个同事，给了我两个不同的解释： 高峰： “上一篇”肯定是旧的一篇，因为上一篇是先发的，所以是旧的，下一篇是后发的，所以是新的 丹 ... ...
-
“转发”已经成为垃圾信息的扩音器 2010-08-02 19:26
1、本就足够无聊的中国网民遭遇论坛和聊天室以后，变得足够喜欢扯蛋，而且历来不顾忌公共噪音的恶劣污染。扯蛋所带来的垃圾信息充斥着互联网的海洋。 2、微博是一个很好的垃圾信息制造工厂。所有信息的扁平化展示，给了垃圾信息足够多的曝光机会。 3、当垃圾信息越来越多，超过了人们所能承受的范围，他们会远离微博，至少会大大降低对微博的依赖的粘度。通过产品设计的各种手段，加强对垃圾信息的控制，刻不 ... ...
-
良好网络广告体验的“FACT”法则 2010-08-02 19:25
广告，已经成为在线生活的一部分，当我们关注网站和产品的用户体验时，广告不应该被忽视。 说起广告，不少设计师会眉头一皱：多少次，自己在设计时一个作品时，对每一个细节都力求完美：风格、布局、用色、对比、平衡……结果产品上线后，旁边有一个大大的广告位，充满声光电效果的flash动画让人无“语”伦比。 说起广告，在跟用户面对面的 ... ...
-
弹出窗口与切换页面的对比总结 2010-07-28 22:26
分享较早前的一个小总结，关于在选择弹出窗口还是选择切换页面来承载信息时，可用用来判断的几个角度，合适初学者来读。 1.弹出窗口与切换页面的区别 1） 操作的连贯性 弹出窗口的速度会比打开一个页面的速度要快，响应更及时一些，点击后可以比较快的得到操作的反馈，而切换页面则经常会让用户等待一段时间。 实例一：个人中心中，查看好友照片的操作： 之前查看照片的操作页 ... ...
-
需求是如何变成产品原型的 2010-07-28 18:03
在一个互联网公司的工作流程中，产品经理（主要指偏向产品设计的产品人员）和交互设计师是这个流水线上最起点的环节，也是关系最暧昧的两个环节。说 其暧昧，是因为在很多互联网公司里面，这两个环节所做的事情是有重合的，这就意味着，他们或许也是整个流程中合作最紧密的两个环节。 相对比之下，产品经理更关注的是产品的内部逻辑、操作流程、策略等；而交互设计师更关注的是产品的易用性、流畅度和操作感 ... ...
-
Android与iPhone界面布局对比 2010-07-27 23:05
上图是我根据Android和iPhone这两个平台的“生产内容型的应用程序”整理出来的界面布局示例。所对比的4个点，均是两大平台的应用程序常规界面元素。 状态栏：Android和iPhone的状态栏均在屏幕顶端的位置，原因无外乎是人的视觉流程是从上到下的。Android的状态栏，具有noti ... ...
-
理解标签中的“极点” 2010-07-27 18:36
前言：本文翻译自《打标签》一书的第三章第二节。本节英语原文是“Understanding tagging’s tension points”，书名是《Tagging》。 社会化书签网站 delicious.com 在2003年最先广泛地引入了协作标签系统。随着该网站——和它的标签——愈发流行，也看得出三个学 ... ...
-
[生活中的设计] 地铁出站口 2010-07-27 16:58
上周六在地铁出站口看到前面一个人一边打电话一边要出站，他在左手边的机器划了卡，想从机器右边的旋转门出去，结果被卡住了。因为左手边的机器管的是左边的旋转门。 设计者大概是考虑用右手划卡身体自然就在机器左边，正好从左边的旋转门出去。 然而实际生活中，如果右手拿了东西（比如打电话那位）或者本身是左撇子，很可能就会用左手去划卡。我认为用右手划卡并不是一个普遍的行为，因此不能作为设计的出发点。这 ... ...
-
Web表单设计之注册表单 2010-07-26 23:15
必须面对的问题有：用户不喜欢提交表单。然我们的目的是让用户愿意提交表单。 下面是一个关于web表单设计的调查报告，这个结果来源于100个令人瞩目的网站。 注册表单设计调查 1.表单的安置 1.1注册表单链接的标题是怎么样的？ 当用户想要加入某个时，他们会试图寻找“sign-up”，“register&rd ... ...
-
如何做得Banner通情达意 2010-07-26 23:01
写在前面的话 有人觉得做个banner放2张图，排几个字的事，一点技术含量都没有，像其他门户banner基本上都是编辑们自己做的。我觉得这么说是不对的，其实一个banner可以研究的东西还是很多的，而且做一个banner是不难，难得是在短时间内做一个出彩的banner。门户的专题一般是编辑套模板拼成的，比较重要的专题，banner部分是由设计师来完成，一个banner ... ...
-
限制的意义 2010-07-26 14:56
重读《人因工程学导论》，发现许多基础心理学的研究结果，并没有被很好的应用在设计中，这里摘录出工作记忆的限制原则，和由此阐发的设计原则，与大家share。 工作记忆，也称短时记忆，是一种相对短暂的，存储少量有限信息记忆方式。工作记忆作为临时存储器，在我们使用时会一直处于激活状态。 工作记忆的限制 容量 众所周知，工作记忆的上限大约为7±2个 ... ...
-
信息架构：3×n 2010-07-23 11:16
一个网站/软件到底需要多少张页面，我觉得是“3×n”张。 3个基本页面 信息架构从某种程度上讲，是对这三种页面的排列组合。 1、着陆/导航页 通常一个网站的首页承担了这一作用。下图截自“hao123”，因为他们全站几乎只有一个导航的作用，很典型。 2、消费页 这是用户浏览我们网站的 ... ...
