文档章节

创建高保真的移动Demo(工具篇)

jj_cui
 jj_cui
发布于 2016/12/30 16:48
字数 4843
阅读 18
收藏 0

学习交互设计的童鞋,都躲不过画原型图这个必考科目。如何创建保真度(视觉、交互、内容)都较高的 Demo 呢,今天腾讯设计师分享的好文,除了推荐很多简单易上手的画图神器,更宝贵更值得细读的是她的思路,完全体现了一个设计师该有的严谨与细致。童鞋们感受一 下。

正文:

一、什么是”更好”的Demo

什么是Demo?Demo是Demonstration的缩写,表示”示范”、”展示”,常指具有示范或展示功能及意味的事物。本文中Demo的含 义更接近与维基百科中的这个解释:一种原型,主要用来展示想法、表现、方法或者是产品特点的简易样例或未完成的产品版本。它常常用来对投资者、合伙人、记 者甚至于潜在的用户展示其选择方法的可行性。

在视觉、交互和内容的保真程度上有着高保真和低保真的区分,所以本文的Demo就是指在这三个纬度(视觉、交互、内容)保真程度都较高的原型。

Demo往往用在以下几个场合和对象:

  1. 新产品 / 功能的演示-投资者、老板、合伙人
  2. 用户研究/市场调研-研究员、潜在目标用户
  3. 可用性测试-真实用户
  4. 交互 / 设计走查-设计师、产品经理、专家

什么是”更好”的Demo:

  • 核心功能完整,主要任务流足够深度
  • 交互保真程度高,操作的体验感真实
  • 根据场合与目的有适当的视觉细节
  • 避免制作过程”过于费工”或”效率底下”

二、工具与步骤

设计师们特别是交互设计师往往需要承担制作Demo的工作,而这个过程从上涉及到产品想法和主要功能、信息架构和界面的组织,甚至向下涉及到视觉风 格和互动反馈等各个环节;打交道的人可能包括了产品经理(提供原始的产品概念,用户需求分析或者是功能完整的产品文档),视觉设计师(提供UI风格和设计 稿),用户研究员(提出测试用例或者研究需求)。

所以,完成整个过程的步骤比单纯地制作线框图或者纸原型要复杂很多,涉及到工具也非常丰富。工具的意义正是帮助我们在工作中提高效率,提升表现效果,市面上一些较典型的工具根据其擅长的环节,可以做如下简单的分类和介绍:

  • 思路整理
  • 原型绘制
  • 界面元素
  • 互动与反馈
  • 移动展示

其中前三部分是广大设计师熟知并且常用的一些工具,而随着移动互联网的大潮,越来越多的工作需要我们展示移动设备上的产品和功能。于是,本文更多笔墨将针对移动Demo的制作和展示上的有用工具。这里的工具包括了软件工具、移动App、工作方法和一些概念。

2.1 思路整理

在制作Demo时,我们并不是要做一个高大全全的东西出来,一个是没必要,另一个理由是不划算。基本上只要满足在展示或者演示的过程中”不露破绽” 即可,所以最开始并不必急着去搭建产品的架构或者界面,而是要围绕着展示目标和形式,并且充分考虑到谁将来用这个Demo,来规划整体的思路——Demo 的”剧本”。

思维管理软件:MindManager、Mindjet。也叫思维导图或者心智图,既可以用在放射性思考的展开 过程,也可以用在整理各级主题的相互关系,最快可以整理并可视化出一个抽象的概念或者过程,下图就是一个简单的Mindjet的输出物例子。利用思维管理 软件,就能将Demo里要展示的产品主要功能抽丝剥茧列清楚层级关系,并且安排好主次关系。

01

Storyboard:故事板,也叫分镜脚本,虽然更多用在电影、动画、电视剧、广告等影像媒体的创作前期,下 图是一个简易故事板的例子。Demo和产品完整App的不同之处在于目的在于”展示”而非”使用”,所以可以借助storyboard的方法将产品核心使 用场景下的主要功能用任务的形式在时间线上做一个规划和梳理。在交互展示性的Demo中,storyboard的作用就更加强大了,通过对场景和情节的引 入,往往会使整个产品或服务看起来更有说服力。

02

2.2 原型绘制

原型绘制算是基本功,根据不同的年代、不同的习惯和不同的机器,最典型的就要算是Visio、Framework、Adobe Illustrator、Axure和OmniGraffle最常为大家使用和熟知了。事实上本人和周围更流行的工具是Axure(Win、Mac系统) 和OmniGraffle(Mac系统),丰富强大的基础绘图功能,丰富的控件模版库,输出物简洁美观,都使得工作效率大大提高。下图是 OmniGraffle的软件界面,有兴趣的可以下载试用版哦,Axure,OmniGraffle。

04

2.3 界面元素

这里的界面元素指的是两个方面,一个是要决定视觉风格上的各种元素在Demo体现的程度,颜色、质感、字体、图片等等,就是我们常常说的视觉设计 (Visual Design);另一个方面就是界面上内容,比如一些用户提供内容的App,或者一些带有SNS特征的App,可能每个用户的界面呈现都会很不一样,这个 时候更加要关注在Demo中要呈现那些内容和故事。

我认为,在Demo界面中呈现的内容都