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

认识专题

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

在页面设计这一范畴之内，存在着产品页面的设计情况，像facebook、微博、twitter、微吧等等之类的产品页面设计。这里着重强调注重功能，交互方面也需着重考量，设计上必须要把用户长时间的浏览体验纳入考虑范围之中。在视觉层面pg下载，侧重于间距方面，布局方面，按钮以及logo，还有icon样式方面。始终注重规范以及视觉识别性。其样式一般而言简洁且易于使用，绚丽的元素数量较少，在视觉上并不侧重于强调冲击力。

专题页面，因大多专题存在推广及活动时间限制，时效性有限，过了此时间，便鲜有人再会访问该页面。其多为活动推广与吸引用户等内容，只有在限定时间吸引最多用户，方可形成有力推广，这就需要强有力的视觉效果以及有趣的浏览体验，以此达成吸引用户之特点。在规范、布局乃至交互方面，可适当放宽要求。

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

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

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

微博专题大多是为各类微博活动以及推广内容而设计的，其内容较为丰富，在设计好用作主视觉的头图之际，大量内容与众多栏目的排版布局同样需要予以留意，唯有针对专题视觉设计的特性来展开工作，才能够切实打造出出色的页面。

设计专题

确立UE，沟通需求。

专题设计的前提是需求方的UE稿也就是产品文档，这需要设计师跟需求方一块儿去进行沟通，设计师能够在早期针对专题需求给出自身的创意以及方案，接着由需求方来形成UE稿，之后设计师依据设计稿展开设计，鉴于专题设计常常没有专门的交互设计给予支持，很多情况下，UE稿仅仅明确了该专题所要呈现的内容，设计师要自己对UE做一些交互方面的调整与优化。往往不能一下子就去翻新整个专题UE，要注意对UE的优化设计常常是递进式的，并且贯穿设计专题的整个进程，并非一下子就能完成的。

专题结构

多数专题结构能分成头图部分与内容部分，传统专题通常仅有一个主页面，复杂一些的是由若干二级页面构成，这依据专题规模来定。一些特别专题有着特殊表现方式，涵盖像用 flash 制作 minisite 这类，还有一些异形特殊专题。采用哪种结构得看谁能更出色地服务于需求。

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

专题尺寸

微博专题一般有着较多的内容，这会致使页面的高度变得过高，许多专题的高度都达到了3000px，在进行设计的时候，是需要适当地去缩短栏目的间距的，要尽可能地去减少页面的高度呢。专题页面宽度与微博主站一样是950PX，采用此宽度是为兼容最广泛显示器分辨率(1024px*768px)，不过因专题设计更注重视觉效果，且当下很多年轻用户(年轻用户常是专题核心用户)的显示器分辨率远超1024px不少，所以我常把专题主视觉与专题内容保证在950px之下，而头图实际设计效果在1600px宽度时会有最好展示。

600px是我们所定义的微博专题的首屏高度，这是大多数用户第一屏能够看到的区域。在这个区域内，我通常会把头图的比例做到280px - 400px左右，这么做的目的在于突出专题主视觉的同时，也要让用户在第一屏就能够浏览到部分专题内容。而通常产品页面的头部视觉在高度上要小很多，这是由产品页面本身特性所决定的。

设计头图

先有的结构确立，在这之后紧接着就开启头图的设计工作，而优秀的头图，它可是专题设计的灵魂所在呢。

进行头图的设计时，首先需要考虑的要点便是头图的设计风格，依据不同的题材，去挑选不同风格的视觉设计方式。通常情况下，我会率先在纸上作出勾勒，或者在脑海之中勾勒出一个大概的模样，有些专题并不具备具象的视觉元素，那么便从专题所包含的文字方面着手，如果实在是感觉缺乏吸引力，那就把一些和专题关联的元素先放置在画布之上，随后尝试各种各样的组合方式，说不定在进行这些尝试的过程中，很快就能碰撞出灵感的火花。

头图风格

微博专题的头图设计风格，大致被划分成：写实类，卡通插画，大标题突出等类别。写实类头图大多需要人物出场，而这就会涉及版权层面的问题 ，所以这类写实风格的头图数量偏少 ，大部分情况是后两种风格。要是需求方对设计风格予以认可 ，我倾向于下头图设计里放进一些自己绘制的视觉元素 ，尽可能把素材使用量降低。

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

卡通绘制类头图。

大标题为主的头图。

头图构图

于一定程度而言，专题头图的创作类似一个更大的横幅，然而又存在诸多差异。它得思索怎样巧妙和下方内容相连，其尺寸更大，细节更多，构图能够变动，要是一味采用千篇一律的规则构图，会致使专题显得单调、呆板，视觉效果欠佳。

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

头图标题

好的专题头图，除了具备精美视觉元素，其大标题需重点突出，通常要设计师耗费专门精力去制作字体的变形以及特效。好的字体效果，实则能够成为专题的主视觉，成为最为亮眼的部分，并且还是最直接展现专题主旨的方式。

手绘设计的头图大标题

仅一般的头图设计，只是专题视觉元素的一种体现，然而，存在这样的情况，有的头图自身就承担着专题内容，这需要依据专题的内容以及需求来确定，即便处于这种状况下，仍然要留意在样式方面保持美观。

头图本身即承载内容功能

是整个专题重点的，是头图部分的设计，专题最需要突出亮点的是其头图部分，整个专题基调的确立离不开头图。

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

专题内容区的设计

形式多样，巧妙衔接

内容区和头图的衔接得巧妙些，忌讳生硬，形式存在诸多变化，要跟专题整体的视觉要素相结合，或者能够继承头图里的视觉元素，设计出不一样的样式，以使内容区的展现更具生动性，让专题页面的视觉效果达到更佳的统一，整体！

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

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

内容清晰，布局合理

尽管是着重突出视觉样式的专题设计，然而让用户得以关注专题内容仍是基本才行。不能因为注重头图的设计就有所懈怠，不必然要遵循栅格化的理论，不过通常为了后续制作方便，我一般以5px的倍数进行间隔区分，个别情形可以例外，只要间距在视觉上维持规整就行。除了一些具有“PK性质”的专题模块，要留意模块栏目分布的权重，内容的主次必须清晰，排布在逻辑上要有关联性。

特色模块，视觉突出

存有一些重点突出的模块，这些模块要与其他的栏目模块开展区别设计，进而能够做到突出然而却不显得突兀。

标题栏的细节，应该予以重视，模块的细节pg下载麻将胡了，同样应该予以重视，视觉效果方面，也需要加以关注，相较于产品页面来说，能够进行一些修饰处理，然而，切不可造成喧宾夺主的情况发生。

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

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

专题二级页和系列专题

般情况下而言，二级页面里头的头图往往都是重复使用主页的，然而呢，也得适度地针对每个页面去增添一些视觉方面的元素，以此来给予一定程度的区分。需要留意的是，所增添的样式同样不适合过于繁杂，毕竟要是头图存在的话，就会显得相当凌乱。

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

倘若是要去打造那一系列的专题，那就务必要留意规划设计之中可复用的元素，像是相同的那个 logo 标题，以及为了着重突出系列感的那种统一的视觉风格。借由这些来强化用户对于系列专题的印象以及认知。

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

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

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

对于专题交互的细节方面，针对按钮翻页这类交互元素，去设计各种各样的状态，如此一来，便会拥有更好的体验效果。

专题自身带有视觉设计的延展以及统一，其中涵盖了专题附属的弹层，还有对话框等方面的细节设计。

专门针对交付物所设置的规范，专题图层数量众多，当题设计弄好交付给前端的同事之时，应当针对图层实施分组操作，要是文件体积很大，那就需要删除或者隐藏没有用处的图层了。

专题设计稿提交之际，尽可能选用各异的图片，使用数目参差不齐的正文，去替换设计稿里的模拟内容pg下载网站麻将胡了，如此一来，有时候能够发觉一些被忽略的问题，像是文字过多而溢出，借此进一步对间距加以调整等，关键在于能够使其看上去更像是一个即将上线的真实页面，更优地展现你所设计的最终面貌。有时会感觉这是多此一举且效果不佳，然而这能够让我们显得更为专业。

良好的沟通，能让设计师提出更好的风格意见、视觉创意，不过满足需求方的推广需求才是前提，因而借助良好的沟通加深对专题需求的理解，就能更准确地把握专题需求，防止返工等问题出现。

在字体方面，存在着这样的情况，是受到浏览器限制的缘故，当前微博专题所采用的主要字号，是规格为14号以及12号的宋体，且此乃设备字体。

正文使用基本能够切实保证清晰锐利，然而要是将其用于标题栏时那就并非如此美观了，此时应当与需求方、前。

同段的同事进行沟通，在不频繁去更改文案的情形下，尽可能地运用图片来制作标题栏文字的效果，以此达成应有的视觉效果。

若是前端存在规范与限制，而又需要复杂的圆角以及半透明页面效果，那么最为稳妥的办法便是去设计两套分别适应高低级浏览器的视觉解决方案，倘若条件不允许，那就得看前端同事针对浏览器支持所采取的策略，总而言之，对于前端实现方面的问题，身为设计师应当主动去展开沟通并且推动其获得解决，（这其中还涵盖专题上线之后的跟踪反馈）

制作好的专题设计，得富有创意，整体呈现出和谐的效果，能让用户留下深刻印象，内容传递具备有效性，视觉元素能有延续与继承。整个页面的衔接不会显得生硬。这些都要求设计师开动脑筋去巧妙地构思并发挥，有时工期很紧迫，没办法做到事事详尽，我也没办法完全依照自己所写的那样去设计专题。

然而，这并不会对我将其视作一个目标，进而持续不断地去靠近，形成任何阻碍 “追求优异杰出，成功便会自然而然地跟随而来”——《3 idiots》。

你怎么看呢？设计师！

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

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