怎么规划一个工程的页面

​ 在开始之前先上两张博客运行截图(博客是挂在这个网址的,但最近在改东西,所以暂时无法访问)。笔者想要用这个主页去的形成过程去描述一下笔者在开发时对页面的一些规划。

img

用户看到的页面

img

后台管理页面

一、认清你做的是什么

​ 在任何一个工程开始之前,首先认识你做的这个app/h5/web网站,究竟服务于谁,主要会产生什么业务。平时这件事情是交由产品画原型图的,他们来完成梳理需求到构图的过程。如果是简单又想快速上手的个人业务,在我看来可以简单的时间,人物,场景分析。这样做的好处可以很快理清你想做的是什么,快速构建第一版视觉图。

拿我的博客举例:

跟博客相关的人物分两种:(1)发博客的人=>博客的使用者(2)看博客的人=>读者

顺着人物去分析可产生的场景

发博客的人:(1)操作文章

​ (2)浏览文章

​ (3)对用户产生的操作进行维护

看博客的人: (1)浏览文章

​ (2)评论文章

​ (3)对你的基本信息感兴趣想要找到你

我们不难看出这两类用户有重叠的需求,这些重叠需求对于笔者而言就是核心需求,其余需求则可以根据场景划分重要性依次实现。

时间:时间对于网站本身的意义比较宽泛。笔者理解,其一是使用者的常用访问时间,访问时间一定程度上会影响页面主题,比如pxxxhub和github,前者夜间访问者居多,主色调是深色系,后者则是浅色色系。其二是时间的紧迫性,例如有些广告页面,只存在一段时间,那么该页面就会产生额外的读秒的需求,同时网页内容和颜色也需要更加富有引诱性。其三是涉及管理系统一类的过期时间。

时间相比于其他两种而言算的上是额外添加的标准。

二、构想几个你觉得合理的页面

​ 明白了要做什么以后,就是把需求落实到图上。

​ 截图可见是我的博客主页和管理平台主页。在构图之时,我的想法就是按人群去分割页面的逻辑。对于发博客的人而言,他们的主要活动区域在管理平台;对于看博客的人来说他们的活动区域在博客首页。

接下来就要问自己两个问题:

看博客的人需要什么?

(1)多分辨率的阅读环境

(2)舒适的排版

(3)合理的留言区域

(4)找到想找到的内容

(5)find you and question

发博客的人需要什么?

(1)操作文章的区域

(2)预览文章的效果

(3)文章内容不被窃取

知道了这两个问题的答案之后就可以落实想法。

看博客的人需要什么?

(1)多分辨率的阅读环境 => 多分辨率适配

(2)舒适的排版 => 排版的主题,进入博客页面的设计

(3)合理的留言区域 => 留言区域设计

(4)找到想找到的内容 => 搜索框,分类查找

(5)find you and question => 你的联系方式打赏方式等等

发博客的人需要什么?

(1)操作文章的区域 => 编辑可用的markdown编辑器

(2)预览文章的效果 => 预览界面或者发布完成后可在管理平台看到效果的界面

(3)文章内容不被窃取 => 安全登录

整理可得:页面1:欢迎进入页面

​ 页面2:博客概览和搜索

​ 页面3:阅读整篇文章

​ 页面4:分类查找页面

​ 页面5:个人介绍

​ 页面6:操作文章界面

​ 页面7:登录管理系统界面

​ 页面8:预览文章界面

三、主题,颜色

​ 我听过不少颜色可以改变用户用不用你东西的论调并觉得十分在理。不多比比色彩心理学。但我想让阅读我博客的人都不冷静(这样说不定骗得到打赏奥),所以采用了较多橙色和红色元素。

​ 至于主题,我这个主题让我公司美工看了会打死我。我给它起了一个名字叫五颜六色的白。

​ 选择UI库的时候切记,要合乎自己页面的风格,实在不行还是自己画svg吧。

​ 所以这里我想表达的是: 想做好页面设计的我,学画画该提上日程了。

​ 抛开这个不谈,偏商业化的作品配色会以蓝色,灰色,白色,黑色,绿色这种冷色系列凸现其严肃的风格,面向女性向的用户产品配色通常会使用粉色,红色,黄色以及马卡龙色系构造梦幻而甜美的效果(虽然不是每个女生都喜欢),男性向的作品除去商业色之外也会使用橙色和一系列比如藏青,墨蓝这种混灰色和黑色的颜色作为辅色。

四、整合

​ 当页面功能,主题色系确定之后,你要做的网页的图雏形就已经出现了。一般我会继续使用原型图制作工具去找一些组件和功能的合理样式。比如开始构想的卡片式概要组件,在Axure和各种类库里有没有相类似的功能,依据这个去初步筛选要使用的组件。其余未找到样式的组件尽可能在制作之前定好是用图片代替或是构建或是造一个新轮子。

​ 在这里建议个人开发者能将这些东西整理成文档,根据完成情况规划开发计划。而且切忌一口吃撑,要从核心功能做起,不断迭代升级。比如在我的规划里,留言功能就是非核心功能,那么在我的开发计划中,我会把它放在2.0版本去搞,这样不会使第一版开发周期过长。