zoukankan      html  css  js  c++  java
  • 网站规划通识:原型图绘制的一些注意事项

    本文来自网易云社区


    作者:林玮园

    雷火游戏部 网站组


    基本概念:

    一、什么叫原型图?

    用线条、图形描绘出产品/专题的框架,即为原型,也可称线框图。

    原型图的输出可根据质量,大致分为低保真、中保真、高保真原型图。

    编辑日常会根据专题的重要性、难易程度等,输出不同等级的原型。如常规玩法专题/节日专题,可输出低保真原型;推广期重点FAB考虑输出中保真原型。

    二、什么叫原型规划?

    一句话描述,原型规划就是“将抽象信息转化为具象信息的过程”。

    无论是大型项目或小型专题,原型规划在其中起到了承上启下的作用。编辑通过前期采集营销需求、梳理产品/专题功能,综合考虑用户体验等因素,对产品/专题的各版块、信息层级、界面和功能进行合理的排序。

    原型规划的目标为,将粗略规划进行细化,规划成为一份可落地执行的解决方案。

    三、原型规划的作用是什么?

    原型规划可辅助编辑、营销、设计、前端与后台,清晰明确产品/专题,共同沟通产品思路。

    低/中保真原型在项目前期使用,相较设计稿性价比更高,节约沟通时间,提高需求修改工作效率。


    正文: 

    首先根据工作经验的总结,说一下原型规划的几个基本原则吧。

    1、画图工具

    雷火网站组普遍采用Axure RP8.0做原型图。

    Axure RP可以绘制出比较正式的产品原型,如果增加了色彩和交互动作(高保真),基本最终产品形态无异。同时最新的RP8版本包含了强大的各类功能icon库,甚至可以满足基本的APP中保真原型输出。

    (新手上路:Axure教程 axure新手入门基础(1-11)http://www.woshipm.com/rp/39203.html

    2、画图原则

    a)  原型框架层级分明

    新手画原型一般会有两种做法,要么想到哪就画到哪,整个专题所包含的原型图都在一个页面上,最多加一些箭头作为示意;或者一张页面图就建一个Page。这两种都会加重做规划的人的思维混乱,读原型图的设计和开发同事也不容易理解。

    做规划,最重要的是想清楚。画原型图前,编辑先搞清楚页面与页面之间的关系,在页面目录中根据层级关系建好空的页面,就像写文章前列提纲,然后再填充进行每一个页面的具体设计。这里放了一张梦岛的规划文件目录作为示意:

    b)  原型规划不影响设计的自由发挥

    编辑做原型规划有时候会进入“心流”,完全沉浸其中,美化美化再美化,原本计划做低保真中保真的原型图,改着改着挡不住往高保真的方向奔去了。这也是新人工作中很容易误入的“歧途”。为什么呢?

    完成原型规划后,编辑需要用原型图和设计师进行直观沟通,随后设计师就会开始设计。原型图对设计师而言,是一个便于理解需求的查看工具。从这个角度说,编辑就不该在原型图上过多的进行“美观”规划,甚至固定布局,影响了设计师的视觉发挥空间。

    比如编辑使用了一个并不太能准确表达功能意图的icon(受限于Axure RP8.0的元件库),设计师看到你给到的icon,就极可能会按照你找的风格来做。

    c)  排版整齐,页面元素统一

    画原型图时,会用到很多软件中自带的元件。一开始没有形成自己习惯的时候,可能会有以下情况:

    同一个页面内同一种元件代表好多种行为;

    同一个页面内同一种元件表示同一个行为,不同页面之间同一种元件表示好多种行为;

    规划的混乱会影响设计过程中设计师对于样式的把控,甚至出现出错-返工设计的情况,这些都是在前期原型规划期间可梳理并避免的。

    此外,排版整齐主要指:1)左右对齐;2)上下居中;3)间隔一致。

    做到以上几点,基本上输出的原型都能保持简明清晰了。

    3、画图雷区

    a)  原型图不宜占用过多时间

    原型图固然要清晰清晰美观,但不能为了好看而主次颠倒,花费大量时间在原型图上是得不偿失的。最具性价比的是根据产品/专题规模和复杂程度,判定所绘原型图的保真度,想清楚流程后进行规划。原型图可以说是需求分析的最后一层了,重点始终是前面的思考。

    为什么会有不少人画原型图慢呢?总结下来不外乎这几点:A)做得慢,对软件太不熟悉,快捷操作几乎不知道;B)想不清楚,做了原型图反复修改,琐碎返工。这两点都是可以在前期培养好习惯,避免掉的。

    b)  原型图不要只图“美”,再次强调!

    最重要的始终是“想清楚”,然后“讲清楚”。一份没有需求说明的原型图是不合格的,除非专题非常简单一目了然。

    强调第三次,原型输出需要保证的是以下要点:

    页面框架要清楚;

    页面不影响设计;

    页面元素要统一;

    页面排版要整齐;

    4、画图技巧

    a)  善用辅助线

    辅助线就像是PS里面的参考线,能分分钟帮你对齐。

    做原型必用的3根辅助线:左右线标识出页面的主体宽度、横的一根标识专题的版头高度(PC版应用较多)。 

    b)  善用组合

    比如在一个页面较多的专题,或APP规划中,在多处会用到的一整块的东西可以做成组合。这个习惯会在复杂产品规划的时候给编辑省了很多时间(别问我为什么知道~~)建议新人在新上手学习的时候就养成这习惯。

    如果采用复制粘贴的老方法,一旦有修改就需要修改每一处地方,不仅容易遗漏还降低工作效率;母版顺便解决了对不齐的问题,毕竟大部件拖起来轻松的多。

    相比于鼠标拖个范围选中一大坨东西来说,组合实在是显得太干净了!


    网易云大礼包:https://www.163yun.com/gift

    本文来自网易云社区,经作者林玮园授权发布




    相关文章:
    【推荐】 基于Kafka的服务端用户行为日志采集
    【推荐】 深情留不住,套路得人心--聊聊套路那些事儿
    【推荐】 一文了解安卓APP逆向分析与保护机制

  • 相关阅读:
    JAVA获取昨天、今天、明天等日期
    IDEA设置调用方法时提示方法上的注释
    Hibernate使用distinct返回不重复的数据,使用group by 进行分组
    SpringBoot 自定义注解
    tailwindcss 使用总结
    nodejs nvm 包管理
    macos NPM 全局安装解决方案
    git 遇到修改github密码导致本地push失败解决方案
    Jupyter 快捷方式设置
    Vue indent eslint缩进webstorm冲突解决
  • 原文地址:https://www.cnblogs.com/zyfd/p/9590604.html
Copyright © 2011-2022 走看看