交互设计师常用的WEB设计模式

2016-02-17 03:48 83 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是交互设计师常用的WEB设计模式,一起来学习了解下吧!

【 tulaoshi.com - 平面设计 】

交互设计师在设计线框图原型时,熟知常见的web设计模式很有帮助,做到心中有数才能创造出符合需求,用户易学易用的界面来。所谓没有必要重复发明轮子,模式往往容易解决常见问题,正确的模式能帮用户熟悉界面、提高效率。

常见的UI设计模式如下图:

交互设计师常用的WEB设计模式,PS教程,图老师教程网

下面分别进行具体分析,遇到不同需求的时候就可以选择合适UI设计模式。

01.主体/细节(Master/Detail)模式

交互设计师常用的WEB设计模式,PS教程,图老师教程网

主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下,引导他们在类目下高效地切换,这无疑是一种理想的方式。如果主体信息对于用户来说更重要,最好选择横向布局。或是主体部分不仅条目多而且包含信息也多,那也该选择这种横向布局。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

举例来说:

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Windows窗口属于纵向排布

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Mac mail的横向排布

0.2分栏浏览

交互设计师常用的WEB设计模式,PS教程,图老师教程网

分栏浏览也分为横向和纵向两种。用户可以通过它,选择不同的类别点进并逐步引导用户找到需要的信息。

举例:

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Outlook采用逐级分栏的界面,用户可以选择进入收件箱某封收件具体邮件内容

0.3搜索/结果

交互设计师常用的WEB设计模式,PS教程,图老师教程网

搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Gmail采用简单搜索

交互设计师常用的WEB设计模式,PS教程,图老师教程网

而对于google学术的用户,高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。

0.4过滤数据组

交互设计师常用的WEB设计模式,PS教程,图老师教程网

分为横向和纵向。开始定义一些已知信息,之后通过限定条件对搜索后的结果进行再过滤。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

51job用户在使用简单搜索输入所需职位后,纵向布局的左边面板提供诸如发布时间、薪金等条件,进一步优化信息

交互设计师常用的WEB设计模式,PS教程,图老师教程网

以京东为例,多数电子商务网站在用户初步模糊搜索后,提供进一步优化的过滤条件。上图中,京东采用的是横向排列方式

0.5表单

交互设计师常用的WEB设计模式,PS教程,图老师教程网

表单类型众多,也是最能体现用户体验是否良好的地方。其中包含很多内容,推荐专门介绍表单的书:《Web Form Design: Filling in the Blanks》。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

注册信息一般使用表单

0.6调色盘/画布

交互设计师常用的WEB设计模式,PS教程,图老师教程网

调色盘/画布虽然不算最常见模式,但它对于创造图形类文档有着不可替代的优势:比如设计线性或非线性图;流程图;页面布局;制定物理大小的设计/图表或控制布局。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

对于设计师来说调色盘/画布这种模式并不陌生,常用软件,例如:Axure、ps都是采用这种方式。

0.7仪表盘

交互设计师常用的WEB设计模式,PS教程,图老师教程网

一个设计完善的仪表盘应提供:一目了然的关键信息,实时数据,易读的图形和操作,清晰的入口和浏览。理论上讲,在一个屏幕下展示复杂的数据本身就很难。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

之前我用水晶易表为苏宁电器做的实时监控各个地区门店销售系统仪表盘

0.8电子表格

交互设计师常用的WEB设计模式,PS教程,图老师教程网

方便用户快速浏览,编辑大板块信息的理想模式。电子表格需要提供下列功能:标准的表格(诸如分类,隐藏/显示 栏目,重列栏目,分组(如果可以)),全局撤销/重做,增加/插入/删除排,键盘导航,导入和导出。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

淘宝购物车选择使用电子表格,可以让用户对已选商品进行快速编辑(增加/减少数量,删除等)

0.9向导

交互设计师常用的WEB设计模式,PS教程,图老师教程网

对于复杂的或是不常见的流程,向导/快速启动屏幕模式可以有效地导航。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

京东上使用wizard快速引导不熟悉流程的顾客完成付款

0.10.Q&A

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Q&A模式是指用户通过选取相符条件,从而自主找到适合自己的解决方案。Q&A不同于搜索模式,它通常需要了解用户基础上,通过提问来帮助用户弄清他们缺乏经验的在哪里(比如健康保险,抵押,计划,购买)有哪些可供的选择或建议。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

上海移动资费导购系统可以让用户通过回答几个问题,可以建议用户选择哪种话费套餐

0.11.平行面板

交互设计师常用的WEB设计模式,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/pmsj/)

平行面板屏幕模式可以收起(一次只显示一个),也可以展开(同时显示全部)。这种模式适合组织大量类似或相互影响的信息,让用户在同一页面更高效的获得信息。最佳应用在:需要申请者需要填写各种没有顺序的类别目录。

0.12.交互模型

交互设计师常用的WEB设计模式,PS教程,图老师教程网

交互模型屏幕模式应用在很多交互要素需要与关键项目(比如日历、地图、图标、画布等)进行交互的时候。是一种用户体验更贴近用户心智模型的模式。在日历、地图、线状图、预设可能场景分析(包括计算器),所见即所得编辑器(包括图片处理)时应用效果非常好。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Google的calendar在日历上可以直接编辑提示内容

附加:13.空白状态

交互设计师常用的WEB设计模式,PS教程,图老师教程网

空白状态指在任何数据输入或进入系统前,应用的自然状态。Getting real 一书曾说空白状态的屏幕使得用户更期待。通过给用户一种预览来降低担心、沮丧和犹豫。空白状态屏幕包括:视频,快速教程,帮助提示,安装后的截图。

交互设计师常用的WEB设计模式,PS教程,图老师教程网

Wufoo是一个在线表单设计网站,初始后会引导用户建立表单

14.其他模式

还有两种广泛使用但在企业软件很少使用的模式。

- 门户:如果你是市场调研专家,商业需求分析师和用户反馈调研员设计门户,可以参考控制面板的设计规范和案例。

- Tabs:其实Tab是一种部件,不是一种模式。它为在多种同语境下的数据提供多选一选择。如果数据结构导致你的设计tab显得很多。有两个小建议:第一,重新考虑架构。通过使用卡片分类或请教一名专业的信息架构师;第二,可以参考平行面板的规范和案例。

参考文献:《Designing interfaces》and 《Designing web interfaces》

讨论

来源:https://www.tulaoshi.com/n/20160217/1578212.html

延伸阅读
在风起云涌的互联网浪潮中,产品迭代的速度越来越快。随着用户需求的激增,也不断带来了对设计师能力要求的提高。初入交互设计领域几年来,明显发现可视化的内容远比文档的更易于被用户(以至我们的客户)所接受,就像用户研究项目中常说的一句话:用户怎么说的,并不代表他们怎么想。今天以原型设计为基点,与大家展开几点做简要的分析。 一、...
许多设计师同学接触交互后,一直有这3个问题:1,交互设计是不是很虚?2,一些视觉为什么要转交互?3,新手交互设计师在工作经验中累积哪些技能会有用?今天有6年经验的资深交互设计师yoyo将逐一为同学们解答,全程高能干货,提起精神来! 首先回答网友的问题: 1,交互设计是不是很虚? 2,一些视觉为什么要转交互? 一、交互设计当然不是...
作为入行不久的交互设计师,我发现自己在交互设计的实践中无法顾及到方方面面,是存在思维盲区的。其中有欠缺经验的原因,也有自身知识局限的问题。进入开发阶段后,每次需要修改交互时,心里都会有些惭愧,感觉为小伙伴们带来了不必要的工作量。 然而现实中,交互设计的改动是难免的(因此一般一个项目会不断迭代交互文档),尤其是在时间安排...
加班中,为换脑子翻翻坟。 要不要长文呢? 算了,还是以一些图片代替吧,大部分都是在07~08年间在之前公司建设团队时的产物。 UE Team 内部工作流程 (图1),指导性的流程,实际操作中会有偏差,如任务紧急有些环节及review就会被跳过,大体是这样一个流程。 图1 UE Team 外部工作流程 (图2),简陋版(复杂版估计看不懂了),表达出大体的...
很多交互设计师朋友可能觉得交互作品既没有视觉作品高大上,又没有用研报告高科技,总是感觉不那么好看。其实不然,交互文档也是可以有档次的。这次我们就来解决这个问题。 作者个人博客:tamic.cc 既然聊精细原型,我们就暂时抛开最基本的栅格化等设计要素不谈,我们这次只是从原型本身的精细化来聊聊。 下面说说个人觉得影响原型精细化的...

经验教程

974

收藏

29
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部