如何设计出色的网站后台原型?

日期:2019/1/19 11:18:36 浏览: 作者:

要制作一个优秀的后台原型,我认为主要就分为三个部分:

1.对于后台功能模块的结构和页面逻辑有清晰的认识

2.能够熟练的使用原型工具

3.优秀的设计风格和设计规范


1是基础,2是进阶,3则是让原型变得出色的点缀。

那么首先聊聊怎么样保证后台的功能结构和页面逻辑的清晰合理。


很多人画原型都有一个习惯,就是不管想没想好,直接就开始打开原型工具先拉几个框,或者就照一个自认为非常不错的网站后台开始照葫芦画瓢,这在我看来都是极其危险的。网页后台不同于一般的web界面,他对于功能模块的划分和页面的逻辑要求是非常高的。一方面网站后台的层次结构相比之下要复杂的多,另外一方面,网页后台的功能更偏向于对前端页面的管理,这就导致了功能之间的关联性和引导可能就要弱得多,这样的情况下,如果没有很好的理清后台的结构就开始画原型,那么最后做出来的后台管理系统很可能就是功能的堆积,功能易用性和操作的流程性都很难得到保障。

我将这一步需要注意的事项总结为以下几点,也是我在绘制后台原型时时刻谨记的:

画原型之前,先理清后台管理的功能模块,通过树状结构图来帮助自己划分页面和模块。大概是下面这样(仅供参考)

理清模块之后,就可以着手设计后台管理系统的骨架,我个人分为三种:主模块(主要分为哪些独立的功能模块),次级分类(每个功能模块又有哪些次级的功能分类),功能事件(具体到每个功能页面内存在哪些主要的操作),大概的布局方式大概如下三种

1)顶部选项卡划分主模块,左侧边栏划分次级分类


2)左侧边栏汉堡包样式的层级分类(偷懒~大概就是worktile的侧边栏样式)

3)左侧边栏二级分类列表浮出

思维导图帮助理清思路很有帮助。

思考的路线应该是自上而下,在进行模块划分时不要拘泥于具体的某个界面的展现形式。

结构和逻辑的清晰(骨架)>功能页面的设计(具体到某个页面怎么设计)>优化性质的功能设计(是否需要预览,实时存储等功能)>用户体验

必要时,可以牺牲用户初次使用的学习成本,初次使用的学习成本是可以为用户熟练掌握后的使用效率让步的。

尽量遵循亲密/对比/重复/对齐的四原则。

对于重要但是不知道如何放置的功能,可以考虑放在顶栏的右侧,而不是放在主模块上(例如把发布任务放到一堆XX管理中)


借鉴并不可耻,脑补尤为可怕。

频繁的弹窗并不是好的选择(必要时该弹还是要弹的),如果可以的话,展开和右侧浮出半页都是不错的解决方式。

后台的架构设计是非常复杂的,决计不是一篇千字不到的文章就可以将后台设计的整个生命周期阐述清楚,因此我建议大家把这个回答当做一个立项时候的方法论就好。


关于第一张图已经被很多人吐槽了,这种图是我立项的时候,自己整理思路,或者和需求方讨论的时候作为纲领来用的,主要是帮助我在需求还不清晰完整的时候,枚举出大部分可能存在的需求并进行粗略的分类,当需求已经得以窥知全貌的时候,当然还会有更加细节的功能流程图和时序图等uml吧啦吧啦的。大家如果更习惯用思维导图,其实更好。


一个完备的后台,可能会包括多种类型或者不同权限的用户,以及功能之间很多时候并非完全割裂,对于这样的情况,粗暴的将功能分为一个个桶自然不太合适,后续是需要对此进行功能的再次梳理和功能间的合理跳转的。


在后续的产品迭代过程中,后台的确会越来越臃肿,但是这不是在设计后台之初就不进行模块结构化设计的理由。诚然当初答题的时候我思考的不一定的完全的妥当,但是一个结构不够清晰的后台意味着以后想加功能都不知道放哪。信息架构杂乱要命的后台,无论是对使用者还是对后续的开发团队都是噩梦。总而言之,好看不重要,但是清晰的结构,正是为了以后想加功能的时候更方便顺手。

我们能为您提供以下服务 qq咨询 联系电话:0592-6059196

网站建设

APP开发

视觉设计

自媒体运营

微信开发

SEO优化

知识产权

网站托管