Category Archives: Product Design

一些提高表单交互水平的技巧

摘自《web表单设计-点石成金的艺术》 1. 表单页面少弄些无关的东西,以免影响注意力。 比如在电商下单页面搞很多关联商品推荐,很容易导致用户放弃下单,去看你推荐的商品。 2. 对于多页表单,应该提供导航栏,列出所有步骤,并指出当前步骤。 3. 输入框的长度该短就要短,这样可以起到良好的暗示作用。比如邮政编码只允许输入6位。 4. 在用户还在输入汉字或英文时就提供反馈,提高交互效率。比如    a.即时验证    b.遇"chi"提示"china", 让用户选择即可    c.提示还“允许输入80字”    d.使用弹出层,比如日期控件或其他富对话框。

首页的内容

摘自《don’t make me think》 首页的内容可以包括: 1. 站点的使命 醒目的logo, 短促响亮的口号,还可以再加一段文字稍长一点的欢迎页面 2. 站点的主要内容 主栏目,可以加上二级栏目 3. 搜索 有的人希望立即找到自己想要的东西 4. 导读 把精彩内容放在杂志封面 5. 内容更新 本站不是一滩死水 6. Quick Links 7. 注册/登录

搜索框的UI设计

搞一个搜索框,搜索所有域 只搞一个搜索框,把关键字在书名、作者里都搜一通。 不要强迫用户指定当前是要搜书名还是搜作者。 未输关键字提交搜索怎么办? 用javascript提示用户必须输入。可以简单地将搜索框高亮一下,未必一定要提供文本警告。

Mechanism of Navigation (网站导航的各种机制)

摘自《web导航设计》 网站导航有很多工具 1. Step/Page Navigation: 如“下一条博客”,“下一页” 2. Breadcrumb: 体现网站结构路径、或者你到达本页所走的路径、或者产品类目层次 3. Tree Navigation 4. Site Map 5. Directory/A-Z Index:  按字母序或某种逻辑排序的目录,如城市导航 6. Tag Cloud: 一堆tag, 让你点 7. Navigation bars and Tabs: 如顶部导航条 8. Vertical Menu: 如左侧导航栏 9. Pop-up menu:  鼠标放上去才会出现 10. Drop-Down menu:  用<select>标签实现的那种,很土 11. 浏览器内置机制:后退、前进等

导航的目标

摘自《web导航设计》 1. Structural Navigation: 体现网站层级结构 2. Associative Navigation: 把相近、相关的东西放一起 3. Utility:  实用工具,比如每个页面的搜索框、语言-国家切换等 Structural Navigation的细节: 可细分为: 1. Global Navigation: 指向top-level pages, 顶部导航条一般干这个事 2. Local Navigation: 主栏目下的次级栏目。 一般作为pop-up menu或左侧垂直导航条。这里的链接不应该跳出本站,一般也不能跳出本主栏目 Associative Navigation的细节: 可细分为: 1. Contextual Links:  如页内链接(常见于wiki),Related Links等 2. Quick Links:  很重要、但又不大会出现在导航栏里的链接(如 “Quick Start”)

页面类型与导航

摘自《web导航设计》 从导航的角度,可以把页面分成三类: 1. Navigational Pages: 不应太多,以免喧宾夺主。 常见导航页有:    a. 首页,一般提供网站结构导航,并用于品牌形象推广    b. Landing Page: 各栏目的“首页”    c. Gallery Page/Search Result Page: 电商常用。在这里应该尽量多给点详情信息。 2. Content Pages: 商品详情、博客正文等。 这里一般搞些关联导航,并提供功能性链接(如购买) 3. Function Page: 比如高级搜索、下单等。 这里文字少,表单交互多。

导航中的项(Label)

摘自《web导航设计》 宜忌:    1. 要说用户的语言。不要用行话、技术术语,不要自作聪明搞看不懂的文艺词汇、避免缩写,语气严肃或者活泼要取决于网站定位    2. 不要用太宽泛、信息量低的词汇。比如“信息” 就不如“公司信息”    3. Label之间要互斥。 不要在“电视”、“冰箱”后面又串一个“家电”    3. 各Label风格要一致:同级导航项要有同等的信息粒度,语法(都是名词性短语)、外观上都要统一。