——

网页版式案例

——

网页内容的布局

美甲网站，哪种设计能一眼看到优惠信息？

图1能一眼看到优惠信息

图1，登录的瞬间，访问者就可以看到关键（优惠）信息，包括页面最上端的联系电话（方便顾客咨询）

图2，版面下半部分信息过于拥挤。无法快速找到有效信息。

将用户最希望得到的（最想传达的）信息插入快速视图中。快速视图就是指，网页设计中，登录之后在无需翻动页面的情况下第一眼看到的空间。关键信息若放在底部，则有可能出现用户还没留意到信息就关掉页面的情况。

——

网页界面配色

哪种设计便于操作？

图2便于操作

图2，出现的颜色种类少，版面颜色统一，便于集中阅读。链接部位的颜色突出，用户可以准确把握点击链接的位置。

图1，配色效果不好，影响文字信息的获取。配色效果使点击位置难以辨别。

用户找到自己需要的信息所用的时间，是网站的重要评价标准之一。网站配色时，应考虑这样的配色能否使用户在打开网站第一时间看到自己最需要的信息。

页面顶部、底部以及主选项的配色上选择饱和度比较低的、稳重的颜色，便于用户视线的集中；标题的重点标记、链接位置的配色选择饱和度较高的颜色，突出重点。

——

界面的文字

哪种设计便于阅读？

右图便于阅读

右图，每段都有小标题，读者在连续的阅读中，很容易把握重点。每个段落都不是特别长，不需要大范围的移动视线便可以轻松完成阅读。

左图，文字堆砌，没有层次感，没有标题，阅读不能快速了解重点。文字与图片之间没有适当空间，文字行距小，不便阅读。

网页文字较多时，应将页面内容归纳概括要点，将最重要的信息先传递给用户。“适当分段”、“段落之间设置标题”、“设置适当的行距和留白”三项是注意的重点。

——

界面的视线引导

哪种设计能恰当的引导视线移动？

左图视线可以自然跟随信息移动

左图，秩序合理，视线由左到右，目标明确

右图，文字图片排列参差不齐，纵向罗列内容过多，没有考虑读者阅读时的视线移动。

阅读视线一般是从左上到右下这样移动，网页中可以在左上方和右下方安放重要内容。考虑到网页页面滚动因素，要适当进行视线引导，以便读者无障碍浏览页面。一般的视线引导顺序是：

Z型：左上——右上——左下——右下

F型：标识——顶端——标题——正文

左上和右下是很重要的位置，左上方吸引读者注意力，引导视线过渡，右下方设置进入下一页的按钮。

书本简介

《板式设计原理》（案例篇）作者是“田中久美子(日) ”，本书分别从版式结构、文字要素、色彩、图片、网页版式五部分内容，将55组遵从设计法则的成功案例与存在问题的失败案例进行对比，让读者深入思考“哪一种才是更好的版式设计？”并给出相应的提示；然后在下一页中给出答案的同时，说明判断孰优孰劣的缘由，并进一步指出对应的设计要点。这种具有趣味性的学习方法，有别于以往设计教材的简单说教，使读者在轻松阅读的同时，通过案例对比的方法快速而牢固地掌握版式设计的基本原理。

~~