交互式媒体设计3.2.4页面流如何设计一个页面.pptVIP

PPT模板下载：/moban/ 交换式媒体设计 第三章：如何设计一个页面 如何设计一个页面 讲完了分析页面间用户流转的页面流，我们再进一步调高“显微镜”，看更微观的东西，今天，我们聚焦到一个具体的页面，看一个页面如何设计。 如何设计一个页面 如果让你现在设计一个页面你会怎么做？不要往下看，先想10秒钟。 如何设计一个页面 如果你想到的都是具体一个个的细节，那么今天的课程将会改变你的思考方式。 如何设计一个页面 先来看一个最基础的案例-资讯类页面的设计。 先给大家看张图，图1-3，这是三张网易某页面的局部截图，大家有没有看出什么规律，看看一个页面的信息是如何布局的，从框架到细节。 如何设计一个页面 图1这个是网易应用市场首页的一个页面布局，把它归纳为四个区块，每个区块对应一个用户的需求或是网易的诉求。 如何设计一个页面 这个布局层次的框架确定了，才能继续将每个区块细化为细节的线框成为了图2。 如何设计一个页面 最后，视觉同学将其完善成视觉稿，如图3。 如何设计一个页面 其中图1的作用尤其关键，这是页面设计的基础，是页面信息架构（后续我们会讲到什么是信息架构）。这个东西虽然平时你们看不到，但是这的确会影响到每一个网页长成设么样的。就跟你看到的都是一栋栋的楼房，看不到建筑图，但是当初决定这个楼房长成什么样子的是那些图纸。如果你曾经画过画，画过素描，就知道了，要先搭一个框架，然后再去抠细节。如果你没有画过画，那你总写过作文吧，作文都是有结构的，什么“总-分-总”，“分-总”之类的结构，你见过“-分-分-分-分-分-”的全是细节的吗？那是流水账式作文。 如何设计一个页面 在设计页面最初，我们一定要想的是这个页面主要实现的功能是那些？需要分成几个部分，每部分是什么作用。用大框框先勾画出来，就像图1这种的，框架定下来之后在针对每一个模块内的内容进行细化，最后形成了图2这种线框图，到此基本功能都确定了，最后通过视觉的调节和润色，赋予这个页面独特的气质，一个页面就这样做好了。 如何设计一个页面 当然我们举的这个页面例子其实不仅仅是这些内容，还有一些页面导航、页脚信息等等，在设计的时候也需要考虑，不过通常这些信息都是由信息架构来定义好全站统一的，所以在这我就不多说了。后边的课程专门会讲导航设计的。 谢谢您的耐心学习！