请选择 进入手机版 | 继续访问电脑版

每天都有无数事情发生,每天都曾在游戏历史上留下记录。游戏史上的今天,带你每天回顾这个日子的历史事件,回味经典诞生的瞬间。

酷站网 首页 站长学院 网页设计

如何快速搭建系统原型(二):内容区(首页)设计

2017-8-10 18:28 17 0 来自: 互联网编辑
简介
品牌推广就用这几招,七月活动立减500-1000元注:上篇文章(《如何快速搭建系统原型(一)》)介绍了系统整体框架的结构,以及相关案例,主要是针对系统的外层框架布局,那么今天这篇文章就要介绍系统正 ...

  品牌推广就用这几招,七月活动立减500-1000元

  注:上篇文章(《如何快速搭建系统原型(一)》)介绍了系统整体框架的结构,以及相关案例,主要是针对系统的外层框架布局,那么今天这篇文章就要介绍系统正文内容区怎么来分析和设计的,对不同的内容分类,介绍参考案例以及各种类型的内容适用于何种场景。

6363746123194365821263194

  内容区分类

  内容区域指的是正文区域根据作用我分为了首页和详情页两大类。首页一般是指系统首页或者模块首页,常需要个性化设计;详情页一般是查看/操作页面,常以列表、表单、信息详情的形式展现。接下来首先介绍首页的设计思路。

  首页(控制面板)

  我再浏览系统交互案例的时候看了很多外国系统动效,发现他们都把首页都叫做“控制面板”(dashboard)。我理解作为一个控制面板,首页的作用就是控制整个系统,控制系统中所有的栏目/模块,那么首页就是由控制这些模块的“面板”组织而成。如下图:

6363746124857328741866419

  那其实我们要设计首页,就是把系统各个子模块简化成一个个小面板,再按照模块的优先级等原则进行布局展示就行了。是不是感觉设计首页很简单,那么真正的难度在于不同的系统不同的功能模块我们怎么把这些模块简化成一个个面板。我将这些面板分为四种类型:信息、表格、图表、表单:

  信息:展示信息,又可以分为列表信息、详细信息、人员信息、消息等

  列表信息:展示多条列表信息,常用于新闻信息列表、排行、文章标题列表等。

6363746124871368769610523

  详细信息:常用于文章详情或单独的图文详情信息。

6363746124885408793652799

  人员信息:常用于展示账号信息。

6363746124897888815626149

  消息:常用于展示短信消息或者人员留言等信息;

6363746124911928838668425

  表格:以表格的形式组织整理信息/数据的展现方式

  根据其样式功能的不同又可以细分为基础表格、可操作表格和个性化表格。

  基础表格:只做信息/数据展示

6363746124933768879669959

6363746124944688891170725

  可操作表格,可以对表格进行编辑、删除、新增、排序等操作。

6363746124955608915969664

  个性化表格:在基础表格的基础上将数据图表、操作功能等内容相互结合做成个性化表格。

6363746124969648934713769

6363746124980568955214535

  图表:数据统计信息的图形化展示,常用于对于系统或者模块总体信息的综述展示

  大部分有系统数据统计的网站会在首页将一部分重要数据信息以图表的形式进行展示。分为:数据综述、数据图表、个性化。

  数据综述:常用在界面首屏,展示系统/模块最终要的数据统计信息;

6363746124996168989729394

  数据图表,以图表的形式展现展示;(图表可参考echart)

6363746125011769015244253

6363746125025809038286529

6363746125038289051259879

6363746125066369103046259

  个性化,多个图表整合

6363746125078849139317781

  表单表单:在网页中主要负责数据采集功能,由表单标签、表单域、表单按钮组成

  本章介绍:基本表单、向导表单、编辑器。

  基本表单,基本的数据输入等操作,常用于登录、设置、信息输入等场景。

6363746125092889153360057

6363746125105369175333406

  向导表单:多步骤的处理表单,常用于注册、办件等复杂流程中,提升交互的效率。

6363746125117849192604928

  编辑器,图文编辑器,常用于信息发布、回复帖子等场景

6363746125130329228876449

  总结

  以上就是首页(控制面板)的介绍,此处只是提供一些常规面板的设计方案,你可以使用这些面板,调整面板大小、信息、位置自由组成你所需要的首页。当然本文只是介绍了总结了我自己在设计设计时的基本思路对系统首页元素的解构,可以给你们作为参考,真正设计系统首页的时候还需要设计师根据实际业务需求来进行分析和个性化设计。

  当遇到系统模块较少或者系统已某个功能为主的需求时,首页可以不以控制面板的样式展现,可以直接对应功能模块的详情页,这也就是我们下一节要介绍的内容区(详情页)设计。

  原型演示地址:http://1q779b.axshare.com

  作者:Tom王,菜鸟交互设计师一枚, 2 年未满的产品交互设计经验, 2 年电商APP运营经验。

  备注:

  文章是我的不专业总结,如有遗漏和疏忽请在评论区指出;

  文章中部分界面截图内容来自网络,如有侵权,请及时联系我进行处理。


鲜花

握手

雷人

路过

鸡蛋
精彩阅读 更多
广告位

400-888-8888

周一至周五 9:30-18:00

北京市大兴区景园北街2号02号

  • 扫一扫 手机访问

Archiver-手机版-小黑屋- 酷站网.  

Powered by Discuz!X3.3© 2012-2018 Comsenz Inc. 版权所有