欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

如何画出专业的原型图?(上)

发布时间:2018:01:31 18:27:04 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1400个文字,预计阅读时间4分钟
导语
怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。

  怎么样的原型图才算是专业的原型图呢?文章总结了一些经验,希望对你有所帮助。

  

如何画出专业的原型图?(上)

 

  本片文章(原型上篇)重点内容:

  清晰的视觉层次

  视觉流结构

  功能预见性

  信息的焦点即为视觉的焦点

  足够简单

  考虑到边界条件

  首先,我们要明确原型图是画给谁看的,通常是以下几类人:开发、部门领导、UI设计师和测试,一个完善的产品流程离不开着几个角色。

  开发通常最关心的是有多少功能,功能的复杂度怎么样,边界条件是什么,异常情况怎么处理等。设计师通常关心元素之间的关系,排版和布局。而跟主管汇报,由于主管的事情是很多的,他们通常最关心功能整体的流程、原型的易读性,以及价值体现。而测试则关心产品需求用户(后面会详细介绍),辅助他们写测试用例,以及是否穷尽考虑到各个场景。

  那么,怎么样的原型图才算是专业的原型图呢?小编总结了工作以来画原型图的经验,总结出了以下经验。

  一、清晰的视觉层次

  突出重要元素,弱化次要元素

  页面是由元素组成的,这些元素包括线、颜色、按钮等,要做到层次清晰,就要把重要的元素进行强化,次要的元素进行弱化,比如可以通过颜色的饱和度来突出重要元素,通过面积突出重要元素等,引导用户聚集视觉焦点到重要的元素上。如下图,通过对比颜色和区域面积的大小,来突出重要元素。

  

如何画出专业的原型图?(上)

 

  格式塔原理

  将相关的元素组织在一起,让用户知道这些元素在任务、数据和工具上是相关的,通常用位置表示。相关的元素位置上相近,不相关元素用空间隔开。如下图,第一个图为反面例子,信息距离上下一致,用户无法区分中间的信息是属于上方还是下方。第二张图是airbnb的截图,红色线框部分明显与下方隔开一定距离,在视觉上体现为跟上方相关。

  

如何画出专业的原型图?(上)

 

  二、视觉流结构

  什么是视觉流?

  视觉流是指视觉焦点形成的轨迹,由于眼球生理结构限制,人眼在某时刻只能产生一个焦点。人的这一视觉特性使得人的视线运动通常表现为点到点的跳跃式扫描(saccade),而不是平滑移动。人在阅读时,一行通常包含4~7个跳动――定位(jump-fixation)的动作,注视持续时间为200~600ms。 因此用户在对界面持续关注后会留下一系列的视觉焦点,这些视觉焦点的轨迹称为视觉流(visual line)。

  平稳的视觉流结构能帮助用户快速理解逻辑路径,减少用户的认知成本。平稳的视觉流有两个原则:

  一、视觉焦点不宜过多;

  二、视觉焦点的路径逻辑尽量简单。

  如下图,同为软件教程详情页,左侧的视觉焦点过多,视觉流向路径复杂,而右侧的视觉流向路径简单,容易理解。

  

如何画出专业的原型图?(上)

 

  三、功能预见性

  看到一个功能,就知道该功能如何使用,称为功能预见性。

  如,lofter底部导航栏在改版前,只用图标表现功能,没法清晰知道每个图标的含义。改版后,用“图标+文字”,直接解释每个图标的含义,减少认知负荷。

  

如何画出专业的原型图?(上)

 

  如下图,为途虎养车某个门店的评价截图,该门店提供三个服务,分别是轮胎、保养、美容和安装,红色方框内为各个服务的得分。当第一次进入这个页面,默认“轮胎”评价高亮红色,其他为灰色,潜意识里不知道点击是可以切换查看对应评论列表的,即切换查看功能感太弱。

  

如何画出专业的原型图?(上)

 

  四、视觉的焦点为信息的焦点

  每个页面都有一个核心功能,这个核心功能不应该被其他功能所覆盖,特别是当功能越来越多、越来越复杂时。那我们怎么判断页面上哪个功能是信息的焦点呢?如果针对竞品调研,页面上颜色饱和度最高,或者功能占据区域最大的即为页面的核心功能,即信息焦点。当设计自家产品功能,要从主流用户的主流场景,或者功能的商业价值、使用频率等维度进行分析,一个页面的信息焦点不宜过多,过多会影响视觉流的稳定。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:表单设计的九个基本法则

下一篇:UI设计! 该如何提供给用户反馈?

  • 18893 文章总数
  • 2302013访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信