关于网页专题页面设计心得

专题页面特性：突出视觉效果，华丽丰富

传统产品页面，简洁注 重功能和图标等视觉设 计。

用抢眼的视觉吸引用户 并留下深刻印象是专题 设计的首要!
设计专题
确立UE，沟通需求。 需求方的UE稿(产品文档)是专题设计的前提，需要 设计师和需求方一起进行沟通。设计师可以在早期 就对专题需求提出自己的创意和方案，再由需求方 形成UE稿。设计师再根据设计稿进行设计。由于专 题设计往往没有专门的交互设计支持，很多时候， UE稿只明确了该专题所要展现的内容，设计师需要 自己对UE进行一些交互上的调整和优化。(要注意对 UE的优化设计往往是递进式的，贯穿设计专题的整 个过程，未必一蹴而就的去翻新整个专题UE)。




• 良好的沟通：设计师可以提出更好的风格意见，视觉创 意，然而满足需求方的推广需求才是前提，所以通过良好 的沟通加深对专题需求的理解，可以更准确的把握专题需 求，避免返工等问题出现。 • 字体的问题。受浏览器的限制的，目前专题的主要字号 还是14和12号的宋体(设备字体) 做正文基本可以保证清晰锐利，但如果用来做标题栏时候 就不那么美观了。这时应该和需求方、前端的同事沟通， 在不频繁更改文案的情况下尽量使用图片来制作标题栏的 文字效果，达到应有的视觉效果。 • 前端的规范与限制，如果需要复杂的圆角和半透明页面 效果，最为稳妥的方法是为设计两套适应高低级浏览器的 视觉解决方案，如果条件不允许，就要看前端同事对浏览 器支持的策略，总之前端实现的问题，作为设计师应该主 动沟通并推动其解决。(这还包括专题上线后的跟踪反 馈。) 好的专题设计，有创意，整体效果和谐，用户印象深刻， 内容传达有效，视觉元素有延续和继承。整个页面衔接不 生硬。这都需要设计师动脑去巧妙构思和发挥，有时工期 紧迫，不能做到事无巨细，我也无法全部按照自己所写这 样去设计专题。
谢谢！

专题结构
大多数的专题结构可分为头图部分和内容部分，传 统的专题一般只有一个主页面，复杂的则有若干的 二级页面组成，视专题的规模而定。一些特别的专 题则有着特殊的表现方式，包括类似用flash制作 minisite（微型网站），以及一些异形的特殊专题。 采用何种结构要看谁能更好的服务于需求。 如：特殊结构形式的专题，头图即为封面，专题的 体验类似翻书，如电子书、电子杂志形式等。

如：http://fj.sina.com.cn/food/zt/ms/index.shtml#21
专题设计细节注意的若干点





• 头图要有延展性，要注意宽屏分辨率下的显示特点。 • 专题交互细节，为按钮翻页等交互元素设计各种状态， 会有更好的体验效果。 • 专题自身的视觉设计的延展和统一，包括专题附属的弹 层，对话框等的细节设计。 • 交付物的规范。专题图层众多，题设计完毕后交付前端 的同事时，应该对图层进行分组。文件体积大就要删除或 隐藏无用的图层。 • 专题设计稿提交时，尽量可能采用不同的图片，数目参 差的正文，来替代设计稿中的模拟内容，这样有时够发现 一些忽略的问题(如文字过多溢出，以此来进一步调整间 距等)，重要是可让他看上去更像是一个即将上线的真实 页面，更好的展现你设计的最终面貌。有时会觉得多此一 举且低效，但这能让我们显得更专业。

设计头图
结构确立接下来后就开始头图的设计，优秀的头图 是专题设计的灵魂。 设计头图首先要考虑的是头图的设计风格，根据不 同的题材，选择不同风格的视觉设计。一般可以事 先在纸上或是脑中勾勒一个大概，有些专题没有具 象的视觉元素那么就从专题的文字入手，如果实在 不带感，可以将一些与专题相关的元素先拼凑在画 布上，然后尝试各种组合，也许一会就能擦出火花。
专题二级页和系列专题
通常二级页面的头图都是复用主页，但也要适当的 为每个页面增加视觉元素予以一定的区别。要注意 的是增加的样式也不易过繁，因为头图的存在会显 得凌乱。 为不同的二级页面设计区别的视觉元素。

如果需要打造系列专题，就要注意规划设计复用元素，比如相同的logo标题， 和为强调系列感的统一视觉风格。以此强化用户的对系列专题的印象和认知。

头图风格 可以简单分为写实类，卡通插画，大标题突出等。
头图标题 好的专题头图，除了有 精美的视觉元素外，头 图的大标题要重点强调， 它通常需要设计师花费 专门的精力来制作字体 的变形和特效。好的字 体效果其实可以成为专 题的主视觉，成为最亮 眼的一部分，同时也是 最直接体现专题主旨的 方式。
关于网页专题 页面设计心得
页面特性：产品页面简洁易用，专题页 面绚丽，视效印象深刻。
关键词:网页专题 页面设计
在页面设计当中，产品页面(如facebook 微博 twitter 微吧等)的设计注重功能，交互，设计要考虑 用户长时间的浏览体验。视觉上侧重间距，布局， 按钮和logo,及icon(图标)样式。注重规范和视觉识别 性。样式通常简洁易用，绚丽元素少，视觉上并不 强调冲击力。 专题页面时效性有限(大多专题是有推广及活动时间 限制的，过了这个时间，就很少会有人再访问该页 面。)，多为活动推广和吸引用户等内容，能在限定 的时间的吸引最多用户才能形成有力的推广，需要 强有力的视觉效果，和有趣的浏览体验，来达到吸 引用户的特点。在规范和布局甚至交互上可以适当 放宽要求。

头图构图 在某种程度上，专题头 图的设计有点类似一个 更大的banner，但也有 着很多的不同。它需要 考虑如何巧妙的与下面 的内容衔接，而且尺寸 更大，细节更多，构图 可以变化，如果只是千 篇一律的采用规则的构 图，会让专题显得单调， 呆板，视觉效果不好。

头图本身即承载内容功能ຫໍສະໝຸດ Baidu

一般的头图设计只是专题视觉元素的体现，而有的 头图本身就承载专题内容，这要视专题的内容和需 求而定。即便如此还是要注意在样式上美观。
专题内容区的设计

形式多样，巧妙衔接
内容区与头图的衔接要巧妙，忌生硬。形式可以有很多变化，与专题整体的视 觉要素结合，或可以继承头图中的视觉元素，设计出不同的样式，让内容区的 展现更生动。让专题页面的视觉效果更佳的统一。
内容清晰，布局合理 特色模块，视觉突出

一些重点突出的模块要和其他栏目模块做区别设计，做到突出而不突兀。标题 栏和模块的细节也应该注重视觉效果，较产品页面而言可以做一些修饰，但不 可喧宾夺主。