筒子们，接着上篇的专题介绍，优网科技小优继续和大家分享完后续专题设计技巧。

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

头图本身即承载内容功能

头图部分的设计是整个专题的重点，也是专题需要突出的亮点，头图可以确立整个专题的基调。

优秀的头图应该紧贴专题内容，美观，吸引用户停留。

专题内容区的设计

形式多样，巧妙衔接

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

用桌布菜单来打造餐饮专题的结合部分

桌布托起头图，本身也成为内容的背景

内容清晰，布局合理

虽然是突出视觉样式的专题设计，但让用户能够关注专题内容还是基本。不能因注重头图的设计而有所怠慢，不一定要遵守栅格化的理论，但通常为了后续的制作方便我通常以5px的倍数进行间隔区分，个别情况可以例外，只要间距在视觉上保持规整即可。除了一些”PK性质”的专题模块，要注意模块栏目分布的权重，内容的主次要清晰，排布在逻辑上有关联性。

特色模块，视觉突出

一些重点突出的模块要和其他栏目模块做区别设计，做到突出而不突兀。

标题栏和模块的细节也应该注重视觉效果，较产品页面而言可以做一些修饰，但不可喧宾夺主。

为获奖模块设立单独的样式

标题栏的也可以根据主题设计细节

专题二级页和系列专题

通常二级页面的头图都是复用主页，但也要适当的为每个页面增加视觉元素予以一定的区别。要注意的是增加的样式也不易过繁，因为头图的存在会显得凌乱。

为不同的二级页面设计区别的视觉元素

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

系列专题的元素logo复用以及风格统一

看过上面那么多的技巧了，下面咱们来总结一下，专题设计细节需注意的若干点：

• 头图要有延展性，要注意宽屏分辨率下的显示特点。

• 专题交互细节，为按钮翻页等交互元素设计各种状态，会有更好的体验效果。

• 专题自身的视觉设计的延展和统一，包括专题附属的弹层，对话框等的细节设计。

• 交付物的规范。专题图层众多，题设计完毕后交付前端的同事时，应该对图层进行分组。文件体积大就要删除或隐藏无用的图层。

• 专题设计稿提交时，尽量可能采用不同的图片，数目参差的正文，来替代设计稿中的模拟内容，这样有时够发现一些忽略的问题（如文字过多溢出，以此来进一步调整间距等），重要是可让他看上去更像是一个即将上线的真实页面，更好的展现你设计的终面貌。有时会觉得多此一举且低效，但这能让我们显得更专业。

• 良好的沟通：设计师可以提出更好的风格意见，视觉创意，然而满足需求方的推广需求才是前提，所以通过良好的沟通加深对专题需求的理解，可以更准确的把握专题需求，避免返工等问题出现。

• 字体的问题。受浏览器的限制的，目前微博专题的主要字号还是14和12号的宋体（设备字体）

做正文基本可以保证清晰锐利，但如果用来做标题栏时候就不那么美观了。这时应该和需求方、前

段的同事沟通，在不频繁更改文案的情况下尽量使用图片来制作标题栏的文字效果，达到应有的视觉效果。

• 前端的规范与限制，如果需要复杂的圆角和半透明页面效果，为稳妥的方法是为设计两套适应高低级浏览器的视觉解决方案，如果条件不允许，就要看前端同事对浏览器支持的策略，总之前端实现的问题，作为设计师应该主动沟通并推动其解决。（这还包括专题上线后的跟踪反馈。）

好的专题设计，有创意，整体效果和谐，用户印象深刻，内容传达有效，视觉元素有延续和继承。整个页面衔接不生硬。这都需要设计狮动脑去巧妙构思和发挥，有时工期紧迫，不能做到事无巨细，但是，掌握了其中的技巧，总能把方向把握到，做到点子上。

责任编辑：亚星管理平台菁思福科技

版权所有：https://www.uzncsrj.com (亚星管理平台菁思福科技) 转载请注明出处