《常见UI设计模式及国内三大B2C网站首页的信息架构.docx》由会员分享，可在线阅读，更多相关《常见UI设计模式及国内三大B2C网站首页的信息架构.docx（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、常见UI设计模式及国内三大B2C网站首页的信息架构交互设计师在设计线框图原型时，熟知常见的web设计模式很有帮助，做到“心中有数”才能创造出符合需求，用户易学易用的界面来。所谓“没有必要重复发明轮子”，模式往往容易解决常见问题，正确的模式能帮用户熟悉界面、提高效率。常见的UI设计模式如下图：下面分别进行具体分析，遇到不同需求的时候就可以选择合适UI设计模式。01.主体/细节（Master/Detail）模式主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下，引导他们在类目下高效地切换，这无疑是一种理想的方式。如果主体信息对于用户来说更重要，最好选择横向布局。或是主体部分不仅条目多而
2、且包含信息也多，那也该选择这种横向布局。举例来说：Windows窗口属于纵向排布Mac mail的横向排布0.2分栏浏览(Column Browse)分栏浏览也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并逐步引导用户找到需要的信息。举例：Outlook采用逐级分栏的界面，用户可以选择进入“收件箱”“某封收件”“具体邮件内容”0.3搜索/结果(Search/Result)搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。Gmail采用简单搜索而对于google学术的用户，高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。0.4过滤数据组(
3、Filter Dataset)分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结果进行再过滤。51job用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如“发布时间、薪金”等条件，进一步优化信息以京东为例，多数电子商务网站在用户初步模糊搜索后，提供进一步优化的过滤条件。上图中，京东采用的是横向排列方式0.5表单(Forms)表单类型众多，也是最能体现用户体验是否良好的地方。其中包含很多内容，推荐专门介绍表单的书：Web Form Design: Filling in the Blanks。注册信息一般使用表单0.6调色盘/画布(Palette/Canvas)调色盘/画
4、布虽然不算最常见模式，但它对于创造图形类文档有着不可替代的优势：比如设计线性或非线性图；流程图；页面布局；调整或控制设计/图表的大小。对于设计师来说调色盘/画布这种模式并不陌生，常用软件，例如：Axure、ps都是采用这种方式。0.7仪表盘(Dashboard)一个设计完善的仪表盘应提供：一目了然的关键信息，实时数据，易读的图形和操作，清晰的入口和浏览。理论上讲，在一个屏幕下展示复杂的数据本身就很难。之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘0.8电子表格(Spreadsheet)方便用户快速浏览，编辑大板块信息的理想模式。电子表格需要提供下列功能：标准的表格（诸如分类，
5、隐藏/显示 栏目，重列栏目，分组（如果可以），全局撤销/重做，增加/插入/删除排，键盘导航，导入和导出。淘宝购物车选择使用电子表格，可以让用户对已选商品进行快速编辑（增加/减少数量，删除等）0.9向导(Wizard)对于复杂的或是不常见的流程，向导/快速启动屏幕模式可以有效地导航。京东上使用wizard快速引导不熟悉流程的顾客完成付款0.10.Q&A(Question&Answer)Q&A模式是指用户通过选取相符条件，从而自主找到适合自己的解决方案。Q&A不同于搜索模式，它通常需要了解用户基础上，通过提问来帮助用户弄清他们缺乏经验的在哪里（比如健康保险，抵押，计划，购买）有哪些可供的选择或建议
6、。上海移动资费导购系统可以让用户通过回答几个问题，可以建议用户选择哪种话费套餐0.11.平行面板(Parallel Panels)平行面板屏幕模式可以收起（一次只显示一个），也可以展开（同时显示全部）。这种模式适合组织大量类似或相互影响的信息，让用户在同一页面更高效的获得信息。最佳应用在：需要申请者需要填写各种没有顺序的类别目录。国外的火车票在不同情况，票价会随之浮动。The T使用堆叠面板，让用户在同一页面下对不同项目进行编辑，又不会觉得混乱0.12.交互模型(Interactive Model)交互模型屏幕模式应用在关键项目（比如日历、地图、图标、画布等）需要进行交互的时候。是用户体验贴近
7、用户心智模型的理想模式。在日历、地图、线状图、预设场景分析（包括计算器），所见即所得编辑器（包括图片处理）时应用效果非常好。Google的calendar在日历上可以直接编辑提示内容附加：13.空白状态(Bonus. Blank State)空白状态指在任何数据输入或进入系统前，应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括：视频，快速教程，帮助提示，安装后的截图。Wufoo是一个在线表单设计网站，初始后会引导用户建立表单14.其他模式还有两种广泛使用但在企业软件很少使用的模式。- 门户：如果你是市场调
8、研专家，商业需求分析师或是用户反馈调研员，设计门户可以参考“仪表盘”的设计规范和案例。- Tabs：其实Tab是一种部件，不是一种模式。它为同情境下的数据提供多选一的操作。如果数据结构导致你的设计tab显得过多。有两个小建议：第一，重新考虑信息架构。通过使用卡片分类法（card sorting）或请教一名专业的信息架构师；第二，可以参考“平行面板”的规范和案例。国内三大B2C网站首页的信息架构随着电子商务的成熟，国内涌出了很多B2C网站，我经常访问的有：当当网、1号店、京东商城、易迅网、为为网和新蛋网等。这类网站很好的利用了计算机技术、互联网技术、即时通信技术和物流渠道，实现整个商务过程中的电
9、子化、数字化和网络化，让不少用户得以不出户购天下物。 在访问这些网站的过程中，我发现其首页的信息架构拥有一些共同特点，也有各自的特色，遂以京东商城、新蛋网和易迅网为例，撰粗评一篇，拿来分享。行文难免有个人主观色彩，欢迎指正。三大网站首页基本结构信息架构的主要目的是帮助用户找到他想要的东西，即Design for way finding。在访问一个电子商务网站时，我们一般会考虑到以下问题：一. 这是什么网站？这个问题的答案在站点标题上得到了很清楚的表达。京东商城：新蛋网：易迅网：三者都表明了自身的定位是网上购物商城，除此之外京东和新蛋都附加了网站的特色描述，比如正品、货到付款等，这些附加信息可以
10、提升网站的可信度以及加深用户的好感度。二. 我需要什么？怎么找？我从哪里开始逛？访问网站的用户可以分为有目的和无目的两种类型： 有目的： 1.确切知道自己想要的是什么商品2.知道自己大概想要什么商品两类都可以通过搜索和分类目录来查找。尽管位置略有区别，三大网站都将搜索放在顶部容易发现的位置，附近也能找到通过SEO计算出来的搜索热门关键词。可见对于商品繁多内容庞大的电商网站来说，搜索是个非常重要的功能，几乎所有用户都能用到。信息架构应该为网站不断增长的资源内容打好基础，搜索则是具有适应网站动态性的最好查找工具，无论网站如何变化，用户可以借助它在任何时候找到想要的东西，并且花费的时间最少。怎样让用
11、户更容易找到搜索功能，怎样提供更优化更合实效的关键词，怎样提高搜索命中率，都是电商网站设计开发的重点。对于分类目录，三者摆放的位置惊人的一致（如3所示），作为副导航，它一般都位于页面左上部的焦点位置， 从这个入口，通过各种分类链接我们可以找到几乎所有需要的商品。此外，页面中酌情加入一些导购标签链接，提供热门商品的直接入口，减少用户通过常规分类目录导航浏览所需的多步操作，缩短访问层级。 无目的： 1.看有什么销售活动（特价+团购+打折）三大网站都在页面靠近顶部的正中位置开辟了活动展示板块（如4所示），以Carousel的模式对当前网站正在进行的销售活动进行宣传。另外，还搭配有团购、限时抢购、特价
12、促销等活动。出于实惠，不少无目的进来逛的用户会留意一下有哪些促销活动在进行，进而选择适合自己的商品购买。以下是三大网站的活动推广区域：京东商城：活动版块较多，所占页面篇幅较大，不足之处在于各类活动相对分散，团购（尽管在水平导航中有一个专门的团购页面）和抢购两个对用户吸引力非常大的板块被放置到页面两侧中部偏下的位置，不易发现。 京东或许觉得团购和抢购不是首页重点？或者他们不屑以这种方式吸引眼球？新蛋网和易迅网：两者差别不大，都想利用限时抢购和团购促销的方式吸引用户，所以把活动放在集中而且突出的位置。这样确实招揽了不少用户，其实很多人（包括我自己）已经慢慢养成习惯，就算没啥具体的需求，也会天天打开
13、看一下有没有什么商品在做特价，恰巧正是自己可能需要的。从挖掘需求到引领需求，同样是电商的成长之道。2.随便逛逛有没有正好需要的商品如果没有具体的需求，只是浏览网站，那么网页内容的组织系统对用户发现和探索商品极其重要，即如何将页面上的内容组织起来，有效的呈现给用户。 三大网站都不约而同的采用了按照主题分tab的水平导航，属于模糊组织方式：京东商城：新蛋网：易迅网：关于品牌专卖，京东和新蛋将其作为独立的tab页面放在主导航栏上，说明在品牌上，易讯还支持的不够多。关于团购，京东和新蛋将其放上了主导航栏，团购相关的内容较多，选择面相对比较广。反观易讯，尽管只有主页上一个小版块（如8所示）做2款产品的团
14、购，但是其效果未必差，出于对其团购产品的“惊喜度”和“实用性”， 个人更加喜欢易讯的团购。关于二手货物，京东和易讯都提供这类服务，新蛋没有，表明了新蛋没有发展或者不够重视二手交易的业务。关于抢购，新蛋有限时抢购，易讯有天黑黑，都是在特价促销活动方面做足了功夫，以此为卖点吸引注重价格的用户。另外，京东的在线读书、京东社区、全部分类页面，表明了该站在图书领域、社区营建和商品种类齐全性都有独特的优势。易迅的礼莫愁直接开辟了纪念日送礼通道，方便用户在特殊的日子为家人朋友选购礼物。综上所述，我需要什么？怎么找？我从哪里开始逛？这类问题主要由网站的组织系统、导航系统、标签系统和搜索系统来解答。只有内容组织
15、严谨清晰、合理显示最大面积的内容与服务，标签和搜索关键词契合热门风向与时俱进，导航重点明确，利于发挥长处，让用户在网页间顺畅的来回穿梭，才能帮助用户找到这些问题的答案。三. 怎样快速发现大众偏好？用户在网站上漫游时，常会去查看一些热门话题、最流行文章以及热卖商品。既然用户想知道其他人在用什么，其他人在买什么，我们就利用从众心理，提供各类热销排行告诉他们这些信息。只要保证数据的真实性和资料的即时性，从销售排行还是能挖掘到一些潜在的购物需求。京东商城：如图所示，京东的首页上并没有任何销售排行或者评论排行的版块。新蛋网：整个购物馆的左侧边栏都是销售排行，利于用户快速定位受欢迎的大众化商品。易迅网：不
16、但有热销榜，还有热评榜，根据销量和评论的热度推送商品，给予用户更多选择。可见，在购物参照信息的提供方面，三大网站是有区别的，易讯网新蛋网京东商城。四. 如何提供反馈？为了收集用户的需求、意见和建议，一般网站特别是消费购物网站都会提供一个反馈通道，方便用户提交自己对网站的看法。我们来看看三大网站的表现：京东商城：我姑且把主页上的投诉中心当成出了购物评价之外的唯一反馈通道，它在用户信息栏（如京东商城1所示）帮助信息下，不太容易发现。点击进入后发现需要登录才能继续，然后提交反馈时需要与订单号绑定才能生效。这等于是说，一个新用户通过浏览京东的网页想提一些意见还必须注册和购物。新蛋网：可以在页面左下角(
17、如新蛋网14所示)找到反馈位置。进入后发现，除了要填写个人的联系方式之外（估计是减少恶意投诉），无需注册也无需提供订单号就能发送反馈，非常方便。易迅网：反馈位置很容易发现，就在用户信息栏的第一项（如易迅网1所示）。不足之处在于，必须注册登入账号才能继续提交反馈意见。反馈提交单可以不用绑定订单号，即无需发生交易。问题在于还是需要填写联系方式，既然要求我注册登入账户才能提交反馈，直接从我的个人账户里就能调出相关联系方式，何必再次让我填写呢？我们可以发现，三大网站的反馈模块在易发现性上排名为： 易迅网新蛋网京东商城， 而易用性上的排名为：新蛋网易迅网京东商城。五. 如何注册？三者表现良好，都将注册入
18、口放在了网页的顶端靠左，方便用户第一时间找到。关于注册流程，本文不做讨论。六. 网站使用相关问题在哪里找答案？三者表现良好，在网站页面底部统一提供了指南&向导，此处用户能找到有关新手指南、支付流程、配送方式和服务条款等网站使用相关问题的解答。总结经过对上面一些问题的分析，我们发现国内三大B2C网站首页在信息架构上的一致和区别。以下是组织此类网站信息架构的基本准则： 站点标题要表明网站的用途，最好主logo能让用户一看就明白网站定位。 提供搜索工具，方便直接查询。 信息组织方式要清晰，按主题、按任务、按用户，或者按年份、按地理位置，将全站的主要版块串接起来。 支持分类目录作为有效的副导航方式，能藉此按层级逐次检索目标。 快速导航标签链接是热门商品的高效捷径。 各类活动（促销、团购、抢购、特价等）放在视觉热点会带来更好的宣传作用，促进销量。 热门排行能利用从众心理挖掘用户潜在需求。 提交网站反馈环节要步骤从简、无需注册。 注册入口和网站常见问题解答要易被发现，前者通常放在顶部，后者通常放在底部。