不能不知道的专题页设计技巧

认识专题

页面特性：产品页面简洁易用，专题页面绚丽视效印象深刻。

页面设计时，产品页面（如facebook 微博 twitter 微吧等）的设计要重视功能性与交互性，设计需顾及用户长时间浏览的感受。视觉方面，要关注间隔距离，页面排布，按钮和logo开元棋官方正版下载，以及icon的形态。设计要遵循规范，确保视觉辨识度高。样式一般追求简洁实用，华丽装饰不多，视觉上不强求强烈效果。

专题页面存续期较短，因为多数专题受推广和活动时段制约，一旦期满，访问量便急剧下降，因此这类页面主要承担宣传和拉新任务，必须在规定时间内吸引尽可能多的用户，才能实现有效的推广，为此需要借助醒目的视觉设计和引人入胜的交互体验，以突出其吸引用户的核心功能，在规范和布局方面，可以适当降低标准，交互设计亦可灵活处理。

用抢眼的视觉吸引户并留下深刻印象是专题设计的首要!

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

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

微博专题主要用来呈现各类微博活动和宣传资料。这类内容通常比较丰富，在完成主视觉头图的设计之后，还需要特别注意众多内容和版块的排布方式。只有从专题视觉设计的角度出发，才能真正打造出出色的页面效果。

设计专题

确立UE，沟通需求。

专题的设计构思要以客户方的使用体验文档为依据，这需要设计人员和客户方展开协商。设计者能在项目初期就针对专题目标提出个人构思和规划，然后由客户方将其转化为具体的使用体验文档。设计者接着要参照这份文档开展设计工作。专题规划通常缺乏专门的交互设计配合，很多时候，用户界面的方案仅清晰了该专题需呈现的要素，设计者必须自行对用户界面进行部分交互上的修正和完善。这种用户界面的优化设计往往呈逐步深入的趋势，持续覆盖整个专题的设计流程，不可能是立刻就全面革新整个专题的用户界面方案。

专题结构

专题布局通常由首图区域和主体内容构成,常规形式多只有一个入口页面,规模较大的则包含多个关联层级,具体数量依据项目体量决定。部分特殊设计会采用非常规手法,例如运用动画技术构建微型站点,或打造形态独特的专题方案。结构选择需以能否有效满足目标为标准。

特殊结构形式的专题，头图即为封面，专题的体验类似翻书

专题尺寸

微博专题往往包含丰富信息，导致页面呈现巨大高度，(部分专题的垂直长度已超过3000像素)。因此，在规划布局时，必须适度压缩各板块之间的空白，以便尽可能降低页面的总高度。专题页面的宽度与微博主站一致，都是950像素，选择这个尺寸是为了适配最普遍的显示器分辨率（1024像素*768像素）。不过专题的设计更侧重视觉呈现，同时现在很多年轻用户（他们是专题的主要群体）的显示器分辨率早已远超1024像素。因此我通常会确保专题的主视觉和内容控制在950像素以内，而头图的实际设计会在1600像素宽度下呈现最佳效果。

六百像素是我们设定微博专题首屏的高度，即多数用户初次浏览时可见的部分。此区域中，我常将主图尺寸控制在二百八十至四百像素之间，此举旨在凸显专题核心视觉元素，同时确保用户能在首屏初步了解专题详情。相较之下，产品页面的头部视觉高度通常要矮得多开yun体育官网入口登录app，这是由产品页面固有属性所决定的。

设计头图

框架搭建完毕，随即着手主视觉的构思，出色的主视觉是整体方案的精髓。

构思封面图时，须先确定其艺术格调，针对各异的主题，挑选对应的视觉方案。我通常会预先在纸上或脑海中构思一个轮廓，对于缺乏具体形象的主题，便从相关文字着手，倘若仍感平淡，可先在画布上堆砌些关联素材，再尝试多种搭配，或许很快就能碰撞出灵感。

头图风格

微博专题的封面图风格主要有三种类型：一种是逼真照片，另一种是卡通图画，再一种是以醒目文字为主的设计。由于真实照片往往需要人物出镜且容易涉及版权问题，因此这种风格的使用频率相对较低，多数情况下采用后两种设计。只要客户对设计风格表示满意，我通常会在封面图中加入自己手绘的图形元素，以此降低对现成素材的依赖。

写实风格头图，多由人物构成。

卡通绘制类头图。

大标题为主的头图。

头图构图

专题头图的设计在某些方面与大型横幅相似，但两者也存在显著差异。它必须思考如何与后续内容自然融合，并且画面尺寸更宽广，细节要求更高，构图方式也更加灵活。倘若一味套用常规的布局模式，会使专题显得缺乏新意，显得呆滞，整体观感也会大打折扣。

圆弧形的割头图和内容区域的构图

头图标题

优质的专题封面图，不仅需要美观的视觉设计，其核心标题必须突出显示，这往往需要设计师投入大量心思去调整字体的形态和添加特殊效果。出色的字体设计本身就能构成专题的主要视觉焦点，成为最引人注目的部分，同时也是最直接传达专题核心思想的方法。

手绘设计的头图大标题

常规的封面构思仅是主题视觉符号的展现，部分封面则直接蕴含主题内涵，这取决于主题的性质和具体要求。即便如此，在形式上依然要追求雅致。

头图本身即承载内容功能

专题的头图设计至关重要，是整个内容的核心，也是最能吸引注意力的关键点，它能够为整个专题奠定风格基础。

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

专题内容区的设计

形式多样，巧妙衔接

内容区域和首图之间的过渡需要自然，避免突兀，可以尝试多种设计手法，同专题的整体视觉风格相呼应，或者从首图中提取关键视觉元素，进行创新性的运用，打造出富有表现力的版式，提升内容呈现的吸引力，使专题页面的视觉呈现更加和谐，整体性~!

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

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

内容清晰，布局合理

这个设计虽然侧重于视觉呈现，不过核心还是在于吸引观众留意主题本身。不能因为头图制作太投入就忽视其他部分，不必严格遵循网格布局原则，不过我一般会采用5像素的整数倍来划分空白，特殊情况除外开元ky888棋牌官方版，只要整体看起来整齐就行。需要关注专题板块的比重分配，除去带有竞技性质的单元，确保内容层级分明，主次分明，各部分之间要有内在联系。

特色模块，视觉突出

某些需要强调的部分，应该与普通模块有明显的视觉差异，既醒目又自然。

标题区域以及各功能板块的细节设计，同样需要关注视觉呈现，相较于产品展示界面，允许增添一些装饰元素，不过不能让这些元素抢占了主体内容的地位。

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

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

专题二级页和系列专题

二级页面的首页图片大多直接沿用主页的设计，不过需要为每个二级页面单独配置一些装饰性的图形，以此来体现页面的独特性。不过要注意，添加的装饰成分不宜过多，否则头图部分会显得杂乱无章。

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

制作连续性专题时，必须留意设计可重复利用的部分，例如固定的徽标和名称，以及为突出整体性而保持一致的视觉表现手法。这样做有助于加深观众对系列专题的记忆和理解。

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

专题设计细节注意的若干点

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

交互细节方面，针对按钮翻页等元素，应设计多种状态，这样用户体验会更佳。

专题的视觉呈现需要进一步拓展和整合，涵盖专题配套的弹出界面，以及对话窗口等要素的精细规划。

制作成果的准则，专题图层数量庞大，主题规划完成后提供给前端开发人员使用时，需要对图层进行归类整理。若文件数据量过大，则需剔除或暂时不显示非必要的图层。

专题设计稿提交时，尽量选用多样的图片，正文数量也要参差不齐，以此替换设计稿中的模拟内容，这样做有时能发现一些被忽略的问题，比如文字过多导致溢出，从而可以进一步调整间距等，关键在于让它看起来更像是即将上线的真实页面，从而更好地展现你设计的最终效果，虽然有时会觉得这样做有些多余而且效率不高，但确实能让我们显得更加专业。

设计者能够给出更佳的视觉方案，提供新颖的创意构思，但必须以实现推广目标为基本要求，因此加强交流能够增进对项目要求的认知，有助于精准掌握项目要点，从而防止出现无效修改的情况。

字体方面存在局限，受限于浏览器条件，微博专题当前主要采用两种字号，分别是14号和12号宋体，这些是设备内置字体

文本主体部分通常显得鲜明准确，然而，在应用于标题栏时，其外观效果会欠佳。针对这种情况，需要与需求方以及前端开发人员共同商议，寻找合适的解决方案。

和部门同事交流，若文案不需频繁调整，建议以图片形式呈现标题文字，以此获得预期视觉呈现效果。

前端方面应当遵循的准则和界限，当设计包含繁复的弧形边缘和半隐状态界面时，最保险的做法是准备两种不同的视觉呈现方案，分别适配不同性能的浏览器，倘若客观条件不允许，就必须参照前端团队成员对浏览器兼容性的处理方式，总之前端领域出现的技术难题，设计人员需要积极同他们交流，并协助找到最终的解决途径，同时也要关注专题发布之后的监测与意见收集。

出色的主题规划，构思新颖，整体呈现融洽，给人留下深刻印象，信息传递精准，画面构成元素相互呼应。各部分之间过渡自然，这些都需要创作者精心策划和灵活运用，偶尔时间紧张，难以面面俱到，我也无法完全依照设想来打造整个项目。

这并不影响我视其为方向持续努力。“精益求精，成就随之而来”——《3 idiots》

你怎么看呢？设计师！

如果你觉得这篇文章有价值，请选择发送给朋友或者分享到朋友圈

我们是一群有爱的设计师，期待你的加入!