网页设计中，内容有什么规划方法吗？

一个成品网页是由网页设计（Web Design）和网页工程（Web Engineering）组成，内容规划即Web Design 的部分，在网页设计的学习中，Web Design的流程里有一个环节叫做内容构建策略（Content Strategy）。

Step1，图1，内容构建=Planning，在这个步骤需要组织该项目的框架内容，网页主旨立意，有一个清晰的脉络与规划。图2，网页也不仅限于PC端输出，还可以输出成手机端和IPAD端。

Step2，明确网页设计中的利益三方，至少是网站拥有者和网站用户。网站拥有者需要考虑自己需要传递信息给终端用户，需要考虑到技术执行，信息传播空间渠道，使其容易出版、容易交互。网站用户的需求则是找到他们感兴趣、有用的信息，需要网站具备消息的准确性和共享性。

Step3：图3，建立用户画像（Persona），匹配到网站的适用群体，里面会包含用户的属性、目标、期待等。往往在建立Persona前会先通过广泛性的采访和问卷来定位到目标人群。

Step4：图4，有了前三个步骤的基本铺垫，我们就可以大致对网页内容有个方向。这时候我们可以出一个页面功能内容初分类。比如说，吃饭类页面有四个功能细分：自助，厨艺课程，到家服务，餐厅。

Step5：图5，接下来是网站层级内容规划，分为第一层级，第二层级和第三层级；将这四个功能模块的内容按主次分布在三个层级。这里就按chef -at -home service当成了主要功能，在1st Tier下列出Service Index。在2nd Tier下，Blog分享是一个传播沟通的途径。3rd Tier则是需要表明合作站点等辅助信息内容，来支撑一个食品消费服务型网站的产出。

Step6：图6，单个网页层级内容规划，将Side-wide Hierarchy中的home里面的层级图进行进一步的内容填充，home下面有4个层级内容，每层内容依次分层和标题。网设设计初学者很多对于信息框架图的推导比较主观，或者说是缺少细分，用step5,6将内容层级细节化输出会使得项目具有更多的逻辑性。

Step7：图7，网页内容优先级也是需要把层级优先级提炼出来，以线框图可视化的形式表现出来，并且有颜色区分。现在学习网页设计很少人使用颜色模块化主次关系，建议这样分区块能使得读者的阅读更流畅。

Step8：图8，到达这个步骤之后，可以规划信息架构图（information structure）了。信息架构图最直观表现出网站的架构，它是上面一系列推导的成果产出。比如这个信息架构图就能直观地看出服务（service）栏目下有Home Chef , Catering, Restaurant。

Step9, 图9，制作线框图，线框图是为了展现网页页面之内的逻辑顺序的一种低保真表现方式。Wireframe线框图的产出也是网站内容生产的一个重要过程。注释和修改痕迹也会在迭代之后进行修改，并留下标注。我们一般会推荐自己的学生邀请1-3个学生帮助完成迭代过程。

Step10，图10，将许多Wireframe线框图的排布在一起并且加入有方向的连接线。没有方向的连接线会让Wireframe 看起来缺乏逻辑性，也失去了给别人测试迭代的意义。

以上十个步骤来康石石身边的学生在学习网页设计时构架自己网页内容的步骤，加上用户反馈的修改意见，就足以应付一般的网页设计了。

望有启发

—————————————————

欢迎关注我的个人公众号（kang-shishi）

如有艺术留学、保研、院校、专业、作品集方面的问题，可私信康石石咨询。

顶一下

(0)

0%

踩一下

(0)

0%