前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >超全面的 UI 工作流程指南(二):原型设计

超全面的 UI 工作流程指南(二):原型设计

作者头像
奔跑的小鹿
修改于 2021-01-15 09:30:17
修改于 2021-01-15 09:30:17
2.4K2
举报
文章被收录于专栏:无原型不设计无原型不设计

本篇为工作流程第二节:原型设计。上期回顾:《超全面的 UI 设计工作流程指南(一):需求分析》

原型设计的主要作用,是用户体验设计师与 PM、网站开发工程师沟通最初的产品设想的重要工具,展示产品内容和结构及粗略的布局,说明用户将如何与产品进行交互,而不是视觉设计

在大厂中,职位分工更为细致明确,大多原型都是由产品经理制作的,而中小企业里,更多的是设计师也要具备制作原型的能力。原型图阶段中设计师需要和产品经理沟通需求,并不是产品经理向设计师下发需求,而是需要相互就自己擅长的方面进行沟通。

原型类型区别

设计时原型的类别也需要关注,每个项目启动时对原型的需求不一定都相同,交流的对象也有可能会对原型的类别产生混淆,以为线框图(Wireframe)、原型(Prototype)和视觉稿(Mockup)是一个东西,设计开始前最好先与产品经理/甲方确认要绘制什么类型的原型。

三种类别虽然产出效果不同,但在本质上都是一样的,为设计开发服务,所以在产品研发时,并没有硬性规定一定先产出哪一个类别的原型图,一切以实际研发过程中的要求为准。

交互设计原则

交互设计作为原型设计里的重要环节,了解交互设计原则,给交互设计提供更多设计支持。

1. Fitts’ Law / 菲茨定律(费茨法则)

目标离的越远,到达就越是费劲。目标越小,就越难点中。如果我们要想鼠标比较快速地命中目标可以采取两个措施,要么减少鼠标与目标之间的距离,要么使目标足够大。

2. Hick’s Law / 席克定律(希克法则)

一个人面临的选择越多,所需要作出决定的时间就越长。在人机交互中界面中选项越多,意味着用户做出决定的时间越长。

3. 神奇数字7±2法则

人类头脑最好的状态能记忆含有7(±2)项信息块,在记忆了 5-9 项信息后就开始出错。与席克定律类似,神奇数字 7±2 法则也经常被应用在移动应用交互设计上,如应用的选项卡不会超过 5 个。

4. The Law Of Proximity 接近法则

根据格式塔(Gestalt)心理学:当对象离得太近的时候,意识会认为它们是相关的。在交互设计中表现为一个提交按钮会紧挨着一个文本框,因此当相互靠近的功能块是不相关的话,就说明交互设计可能是有问题的。

5. Tesler’s Law 泰思勒定律(复杂性守恒定律)

该定律认为每一个过程都有其固有的复杂性,存在一个临界点,超过了这个点过程就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。如对于邮箱的设计,收件人地址是不能再简化的,而对于发件人却可以通过客户端的集成来转移它的复杂性。

6. 新乡重夫:防错原则

防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,如在硬件设计上的 USB 插槽。而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免误按。

7. Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这个原理被称为「如无必要,勿增实体」,即如有两个功能相等的设计,那么选择最简单的。

8. Steering Law 转向定律

触控技术(Touch)应用:

  • 0° 方向是最利于操作者移动的方向,具有较好的视觉反馈,成功率相对最高;
  • 120° 方向用户在操作时最为困难,在用户界面交互设计中应尽少使用;
  • 用户手指在各个方向的运动中,宽度低于 14 像素的 Touch 是用户体验最差的。

9. 帕累托定律(80/20原则)

任何大系统中,大部分的效果仅有少数几项变量决定。用户 80% 的时间花在了 20% 的功能上。

其实交互定律看起来有点枯燥,生搬硬套其实并不一定能套上去,列举以上的设计原则更多的是为设计做参考,结合设计原则,是提升设计说服力的有效方法。

完整的原型图

一套完整且专业的原型图,除了按照需求文档设计出所有页面,串联页面以外,还包括一些让人容易疏忽的地方,因为原型图所交付的并不只有需求方,还有设计师与开发人员。

1. 原型图标注,画开发看得懂的图

原型图对于设计师来说,是为了查看产品功能页面与逻辑路径。对于开发人员来说,除了产品框架搭建,他们最关心的内容是产品使用中的边界条件、页面跳转关系。原型设计时需要画出功能的所有交互状态,因此原型图标注包括:定义好每个标注点的含义和事件,梳理所有对象和逻辑关系,状态、模块化区分和标记。

定义好每个标注点的含义和事件

在做交互稿标记之前,定义规范好每个标记的含义,形成统一的规范,使得团队成员易于理解。如,用水滴表示标注的功能,用圆圈+箭头的形式来标识页面跳转关系。

梳理所有对象和逻辑关系、状态

下面的原型图标注以饿了么商家详情页结算订单为例,先用思维脑图梳理功能状态,这样能避免遗漏一些边界条件。

模块化区分和标记

梳理好状态后再在原型图上写产品用例,每个功能做成一个模块,有利于往后的维护和迭代。

2. 在同一个页面展示所有的交互状态

当项目开始一段时间后,原型里的标注会逐渐变多,很多的开发和设计,没有耐心看原型图上的各种标注,所以尽量能一个页面上显示出所有的交互状态,避免设计与开发时看漏。

3. 流程图,梳理业务逻辑关系

用流程图梳理产品业务的逻辑关系,常用的流程图分为单向流程图和泳道图(涉及到多个角色)。

单向流程图一般描述单一角色完成某个任务的整体过程,如登录注册过程、支付流程、填写资料等。

绘制流程图需要注意以下几点:

  • 确保产品流程的合理性;
  • 有效传达需求;
  • 检验异常分支。

以上简单的梳理了一下日常工作设计原型图中容易让人忽略的内容。

4. 关于原型工具

Axure

官网链接:http://www.axure.com/

很有名的原型设计工具,也算是日常工作中最常用的原型工具,成名很早,很多设计师、产品经理都有用它。它除了能够高效率制作产品原型,快速绘制线框图、流程图、网站架构图、示意图、HTML 模板外,还支持 java script 交互的实现,并生成 Web 格式上传到 Axure share 分享浏览。

Mockplus

官网链接 :https://www.mockplus.cn/

Mockplus 是更快、更简单的原型设计工具。用于移动app原型设计、web原型设计、桌面应用原型设计和产品原型设计。

当然,目前市面上有很多种原型工具,例如Sketch、ProtoPie 等,都适合用于原型交互设计。当然选择哪个工具要看你自己,你的需求是什么,最适合自己工作流程的工具是哪种,有没有电脑系统的要求等等。

5. 推荐设计应用Figma

官网链接:https://www.figma.com/

Figma 是一个完全免费的在线设计软件,支持 Windows 和 macOS 等多个平台,是可以让整个团队的成员同时查看并修改协作的平台。使用过 Sketch后,上手 Figma 几乎没有难度。

原型设计

在 figma 里面,你可以无缝完成从设计到原型演示的切换,不需要反复同步设计图到第三方平台,并且可以利用 Figma Mirror 在手机上预览效果。单击播放图标将进入演示模式,可以在其中实时查看已完成的原型。

实时协作+内置评论

在 Figma 里,设计和协作可以是同时进行的,任何人都可以在设计图的任何地方添加评论,你可以在评论中@其他人或将评论标记为已解决。

6、推荐一款全流程设计平台:摹客

官网链接 :https://www.mockplus.cn/

设计+协作,无缝连接产品、设计、开发全流程Sketch/XD/Figma/PS/Axure设计稿交付,高保真原型设计。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
2 条评论
热度
最新
网安之路要开始了
网安之路要开始了
111举报
是滴
是滴
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
以“摹客”为例,聊聊产品经理原型设计中的 “道术器”
作为产品经理,在原型设计过程中,掌握其中的“道术器”,对于高阶产品发展有着潜移默化的帮助。
奔跑的小鹿
2022/09/16
9130
以“摹客”为例,聊聊产品经理原型设计中的 “道术器”
让你的设计更加高效便捷的5款原型设计工具
原型是整个产品面市之前的一个框架设计,它就好像建筑师的设计图纸一样重要,设计师可以利用它直观体现产品主要界面风格以及结构,并展示主要功能模块以及页面和组件直接的相互关系。举个例子,一个下拉菜单,通过原
奔跑的小鹿
2018/03/16
8100
让你的设计更加高效便捷的5款原型设计工具
原型图+交互设计+UI图,到底啥关系
其实一直以来都纳闷,产品经理要做原型图,然后UI设计师要画UI 图,这两个之间貌似有许多重复的地方,而且还是大多时候还是并行进行,实在不知道二者之间的关系是什么,通过查阅资料,做一下总结。
PM吃瓜
2019/08/12
3.4K0
原型对接工作流!摹客iDoc全面支持Mockplus、Axure原型
这是UPA(国际用户体验专业协会)发布的完整产品用户体验设计流程图,画面看起来蜿蜒曲折,像极了现实中设计开发流程的繁复难言,从开始走到流程结束的人,自然是最苦逼的产品经理。然而,画面呈现的复杂度和产品经理现实中水深火热的处境相比,可谓冰山一角。
奔跑的小鹿
2019/06/14
8020
原型设计的重要性你真的知道吗?
一个好产品的诞生,必定离不开原型设计。原型设计是整个产品开发中最重要的, 并且确定了整个软件的方向,重要性就和建筑师的设计图一样。 “很难想象一个没有原型的产品是如何诞生的。原型设计的核心目的在于测试
奔跑的小鹿
2018/03/16
1.1K0
原型设计的重要性你真的知道吗?
基于用户需求,打造原型设计工具中的卓越用户体验
随着互联网的发展,产品设计需求也随即增多,市面上的原型设计工具都差不多,呈现差异化是当前原型工具从竞争中脱颖而出的关键。
奔跑的小鹿
2022/09/20
7600
基于用户需求,打造原型设计工具中的卓越用户体验
4款APP原型设计工具助你搞定移动应用设计!
随着信息化社会的不断发展,不仅手机迭代更新的速度飞快,就连手机里的App 也层出不穷。作为一名UI/UX设计师或产品经理,如何才能设计一款出色的移动App?光有好的创意是不够的,你还需要一款正确的Ap
奔跑的小鹿
2018/06/11
5.6K0
原型工具 墨刀_原型设计工具 axure
Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studio、FireWorks要快速、高效。
全栈程序员站长
2022/09/20
2K0
原型工具 墨刀_原型设计工具 axure
原型设计用得最多的是PS吗?该如何画原型?
在产品开发的前期工作中,产品经理或设计师通常需要进行原型设计工作,创建一个可交互和可视化的原型,以更准确地表达他们的设计构思和想法,并为项目顺利递交给开发人员做好准备。进行原型设计时,使用设计工具来画原型图是最高效的方式。
奔跑的小鹿
2023/07/04
5270
原型设计用得最多的是PS吗?该如何画原型?
B端原型设计太复杂?看这一篇轻松入门
近年来,B端市场前景展现广阔,B端产品经理也成为了炙手可热的高薪岗位。作为负责管理和推动B端产品开发和生命周期的负责人,B端产品经理在企业市场中发挥着重要作用,因此他们往往也是具备全局能力框架的专业人员。
奔跑的小鹿
2023/07/12
1.2K0
B端原型设计太复杂?看这一篇轻松入门
一句话评述8个最热的原型工具
早在十年前,要是提到原型工具,大概也只有笔纸和白板了。现如今,原型工具如雨后春笋般涌出,形式也各样,有在线的,也有桌面端的,让人目不暇接。今天小编就为大家吐血整理了今年夏天最热的8款原型工具。 1.
奔跑的小鹿
2018/03/16
1.1K0
一句话评述8个最热的原型工具
你真的了解这4款协作设计吗
目前在协作设计领域使用最广泛的4款协作设计有:zeplin、invision、摹客、蓝湖。下面笔者就来介绍下这4款工具的功能详情,如果你还没有开始使用,不妨先来了解下。
奔跑的小鹿
2022/03/16
5750
你真的了解这4款协作设计吗
国产原型设计工具墨刀、Pixso与Axure的区别以及未来发展趋势
曾几何时,Axure几乎是每一个产品岗位的标配技能,无论是校招还是社招,招聘要求中“熟练掌握 Axure”都被视为基本项。但随着近几年国产原型设计软件的快速发展,越来越多产品人正在转向更易用、更贴合本土需求的国产工具,如墨刀、Pixso。今天我们就从多个维度,深入剖析这三款原型工具的区别,并展望原型设计工具的发展趋势。
产品大余
2025/06/05
2210
国产原型设计工具墨刀、Pixso与Axure的区别以及未来发展趋势
响应式网页设计指南
1、如何理解响应式设计(RWD) 响应式网页设计的概念最初是由Ethan Marcotte提出,从设计的角度引领我们思考:为什么一定要为每个用户分别做一套设计方案呢?是否可以有一种设计能够根据不同设
奔跑的小鹿
2018/03/16
1.6K0
响应式网页设计指南
App项目实战之路(三):原型篇
本来,我是没打算写原型篇的,但考虑到关注我的人中也有部分产品狗,更重要的是,我一直认为,不懂产品设计的程序猿不是优秀的产品经理。而且,应该也有不少程序猿想往产品经理的方向发展的。所以,最后决定献丑了。
Keegan小钢
2018/08/10
1.8K0
App项目实战之路(三):原型篇
9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
原型设计的发展历史经历了纸上原型、静态线框设计、到现在的可交互式原型。作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高。因此,如今的原型设计工具格局也发生了很大的变化。
奔跑的小鹿
2019/01/24
3K0
9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
一款好用的程序员切图标注神器
我这里推荐的是摹客,摹客是设计+协作(All in One)的一站式云平台,为产品开发团队提供高保真设计、设计稿交付、全流程协作和设计规范管理。
奔跑的小鹿
2021/01/20
9780
一款好用的程序员切图标注神器
UI设计初学者必看,这款设计神器教你快速入门
网络时代,网页和手机App已经深入到人们生活的方方面面。这也使得App界面设计越来越受青年求职者们的青睐,并纷纷投入这个行业。但是,作为UI设计初学者,究竟如何才能快速的入门?当今市场上,是否有那么一款高效实用的设计工具,帮助他们快速入门,提高工作效率的同时,迅速提升专业技能和求职竞争力呢?
奔跑的小鹿
2019/01/24
6390
UI设计初学者必看,这款设计神器教你快速入门
交互原型画得丑?29个优秀UI/UX线框草图
现在越来越多UI设计师都需要画一些交互的线框图,然而作为视觉专家,当然要把它画得靓靓的嘛,是不是?所以很多用户会使用《5款高效的原型设计工具》来绘制,或者直接手绘更有逼格。 今天达人手工整理一大波
奔跑的小鹿
2018/03/16
9640
交互原型画得丑?29个优秀UI/UX线框草图
Axure软件下载,专业原型设计工具Axure 9中文版下载安装教程
Axure是一款专业的原型设计工具,由美国Axure Software Solutions公司开发。它被广泛应用于产品经理、交互设计师等人员在进行产品设计时的流程中。同时,由于Axure软件具有简单易学、功能强大、支持团队协作等特点,也成为了许多企业内部原型设计与管理的首选工具。
用户10410624
2023/04/12
1.2K0
推荐阅读
相关推荐
以“摹客”为例,聊聊产品经理原型设计中的 “道术器”
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档