页面在线原型设计方案-如何设计出色的网站后台原型

01字体:类型&字号

在原型页面的文字设计中,字体的选择方面建议使用苹方(macOS)或是微软雅黑(Windows),以便达到更好的显示效果。

字号我个人比较常用的是12、13、14、15、17,偶尔会用9、10、20。

02配色:色彩&界面

在原型页面的色彩设计中,最好保持一致,无论是文本还是其他图形、图片不要使用太多非黑灰白以外的色值。

如果用于演示的产品原型稿件中需要配图标,则需要保持图片的一致性,大小及样式。但在实际的工作中,除了一些指示性比较强的图标,比如搜索、设置、分享等等,其他的尽量不要使用图标素材。

组成原型界面的素材也要尽可能的避免混搭,比如从成熟产品中截图然后应用到自己的产品原型当中。

在Axure9中新增了AdjustColor【颜色调整】,可对图片可以进行色值调整。

03排版:对齐&间距&留白

在原型页面的结构设计中,要灵活的使用参考线、对齐、分布等功能,使页面内容具有良好的可读性。

从个人习惯来讲,无论是间隔还是留白,我会按照5像素的倍数进行设置。留白一般在Style样式面板中调整Padding值,很多时候,Padding值也能辅助我对组件进行对齐操作。文本之间的行间距偶尔会调整,但会以默认为主。

04案例

以下是一些规范原型页面示意:

05结束语

对于想要从事产品经理或是交互设计师的新人来讲,建议大家在熟悉工具的使用过程中有意识的培养自己的设计规范。在绘制线框图,或者临摹其他成熟产品创建高保真原型(实际工作中并不需要创建高保真原型,这边需要特别注意)的时候,一定要注意以下2点:

线框图:不建议完全按照苹果或是安卓,设计规范进行页面设计。

高保证:不建议像素级临摹。

明确目标

既然是做原型的角度,我们就从具体工作来谈,首先要明确的肯定是产品目标,比如以下几个问题:

是全新的产品,还是更新改版?

有没有相匹配的前台系统?或者其他需要配合的线下资源?等等

业务层面的目标是什么?新增功能?体验优化?等等

需求分析

明确了产品目标,在做需求分析的时候就会有所侧重,总的来说,值得关注的有以下几个要素:

1、角色权限

这个非常重要,一定要在具体设计之前熟悉管理后台的所有类型用户。包括一共有几类用户,他们各自的使用需求,操作权限,还有用户权限的设计。

2、信息架构

一定要画信息结构图(即产品层面的数据模型),主要用于理清产品结构。画一下脑图,列一个excel表单,详细程度依据自己习惯即可,需要和用户配合起来设计。

这个是和普通原型设计比较不同的一点,如果是改版还需要特别标注和旧版的区别,以及旧数据的清理或迁移方案。另外,还需要考虑和其他资源(前台、对应页等)的配合,数据流向以及状态转移等。

4、功能流程

常规需要考虑的用户流程和业务规则流程。根据不同的业务目标,用户流程可以按场景或功能进行划分,给予部分用户适当的优化。业务规则流程需要保证逻辑清晰,闭环,不要遗漏异常流(闭环很重要)。

原型设计

终于可以开始原型设计啦,现在各种管理后台的主题模板都有很多,没有特别需求的情况下,和开发沟通好选择一套“抄”即可。

设计过程中注意一下导航,列表(增删改查排序筛选)等,细节上不要遗漏预览、错误/成功提示、新内容提醒、快捷键等

原型设计是整个产品面市之前的一个框架设计。以网站注册作为例子,整个前期的交互设计流程图之后,就是原形开发的设计阶段,简单的来说是将页面的模块、元素、人机交互的形式,利用线框描述的方法,将产品脱离皮肤状态下更加具体跟生动的进行表达。

画原型只是一个由想法变成图纸的过程,类似于建房子,在落笔之前更要想清楚建成什么样?

工具方面目前用的比较多的有axure、mockplus、墨刀,还有很多,直接搜索就能找到