页面特性:产品页面简练易用,专题页面艳丽视效形象深入。
在页面规划傍边,产品页面(如facebook 微博 twitter 微吧等)的规划。重视功用,交互,规划要考虑用户长期的阅读体会。视觉上偏重距离、布局、按钮和logo、及icon款式。重视标准和视觉识别性。款式一般简练易用,艳丽元素少,视觉上并不着重冲击力。
专题页面时效性有限(大多专题是有推行及活动时刻限制的,过了这个时刻,就很少会有人再访问该页面。),多为活动推行和招引用户等内容,能在限制的时刻的招引最多用户才干构成有力的推行,需求强有力的视觉作用,和风趣的阅读体会,来到达招引用户的特色。在标准和布局乃至交互上能够恰当放宽要求。
用抢眼的视觉招引户并留下深入形象是专题规划的首要!
网页规划 专题页规划 网站元素 logo规划
传统产品页面,简练重视功用和图标等视觉规划
网页规划 专题页规划 网站元素 logo规划
专题页面杰出视觉作用,富丽丰厚
微博专题多为各种微博活动和推行内容规划。内容较多,在规划好头图这种主视觉的一同,许多内容和栏意图排版布局也要留意。针对专题视觉规划的特色着手,才干实践出优异的页面。
规划专题 建立UE,交流需求。
需求方的UE稿(产品文档)是专题规划的前提,需求规划师和需求方一同进行交流。规划师能够在前期就对专题需求提出自己的构思和计划,再由需求方构成UE稿。规划师再依据规划稿进行规划。因为专题规划往往没有专门的交互规划支持,许多时分,UE稿只明晰了该专题所要展示的内容,规划师需求自己对UE进行一些交互上的调整和优化。(要留意对UE的优化规划往往是递进式的,贯穿规划专题的整个进程,未必一蹴即至的去创新整个专题UE)。
专题结构
大多数的专题结构可分为头图部分和内容部分,传统的专题一般只需一个主页面,杂乱的则有若干的二级页面组成,视专题的规划而定。一些特别的专题则有着特别的表现方法,包含相似用flash制造 minisite,以及一些异形的特别专题。选用何种结构要看谁能更好的服务于需求。
专题尺度
微博专题一般都有较多内容,会使得页面的高度过高,(许多专题的高度都到达了3000px)。规划时需求恰当的缩短栏意图距离,尽可能的削减页面高度。专题的页面的宽度和微博主站相同为950PX,选用这个宽度是为了能兼容最广泛的显示器分辨率(1024px*768px),但因为专题的规划更加重视视觉作用,并且目前的许多年青用户(年青用户往往是专题的中心用户)的显示器分辨率早已超过1024px许多,所以我往往会将专题的主视觉和专题内容确保在950px之下,而头图的实践规划作用会在1600px宽度时做最好的展示。
600px是我们界说的微博专题的首屏高度,也就是大多数用户第一屏能够看到的区域。在这个区域内,我一般将头图的比例做到280px-400px左右,这样做的意图是为了在杰出专题主视觉的一同也要让用户在第一屏就能够阅读到部分专题内容。(而一般产品页面的头部视觉在高度上要小许多,产品页面自身特性所决议的。)
规划头图
结构建立接下来后就开端头图的规划,优异的头图是专题规划的灵魂。
规划头图首先要考虑的是头图的规划风格,依据不同的体裁,选择不同风格的视觉规划。一般我会事先在纸上或是脑中勾勒一个大约,有些专题没有具象的视觉元素那么就从专题的文字下手,假如真实不带感,能够将一些与专题相关的元素先拼凑在画布上,然后测验各种组合,或许一会就能擦出火花。
头图风格
关于微博专题的头图规划风格大致分为:写实类,卡通插画,大标题杰出等。写实类头图多需求人物进场触及版权,所以这种实类的风格的偏少,大部分仍是后两种。假如需求方对规划风格认可,我喜爱在头图的规划中放入一些自己制造的视觉元素,尽量削减资料运用。
网页规划 专题页规划 网站元素 logo规划
写实风格头图,多由人物构成
网页规划 专题页规划 网站元素 logo规划
卡通制造类头图
网页规划 专题页规划 网站元素 logo规划
大标题为主的头图
头图构图
在某种程度上,专题头图的规划有点相似一个更大的banner,但也有着许多的不同。它需求考虑怎么奇妙的与下面的内容联接,并且尺度更大,细节更多,构图能够改变,假如仅仅千篇一律的选用规则的构图,会让专题显得单调,呆板,视觉作用欠好。
网页规划 专题页规划 网站元素 logo规划
圆弧形的割头图和内容区域的构图
专题页seo设计技巧-八韵网络工作室
头图标题
好的专题头图,除了有精美的视觉元素外,头图的大标题要要点着重,它一般需求规划师花费专门的精力来制造字体的变形和特效。好的字体作用其实能够成为专题的主视觉,成为最亮眼的一部分,一同也是最直接表现专题宗旨的方法。
一般的头图规划仅仅专题视觉元素的表现,而有的头图自身就承载专题内容,这要视专题的内容和需求而定。即便如此仍是要留意在款式上漂亮。
网页规划 专题页规划 网站元素 logo规划
头图自身即承载内容功用
头图部分的规划是整个专题的要点,也是专题最需求杰出的亮点,头图能够建立整个专题的基调。
优异的头图应该紧贴专题内容,漂亮,招引用户停留。
专题内容区的规划
方式多样,奇妙联接
内容区与头图的联接要奇妙,忌僵硬。方式能够有许多改变,与专题全体的视觉要素结合,或能够承继头图中的视觉元素,规划出不同的款式,让内容区的展示更生动。让专题页面的视觉作用更佳的一致,全体~!
网页规划 专题页规划 网站元素 logo规划
用桌布菜单来打造餐饮专题的结合部分
网页规划 专题页规划 网站元素 logo规划
桌布托起头图,自身也成为内容的背景
内容明晰,布局合理
虽然是杰出视觉款式的专题规划,但让用户能够关注专题内容仍是根本。不能因重视头图的规划而有所怠慢,纷歧定要恪守栅格化的理论,但一般为了后续的制造便利我一般以5px的倍数进行距离差异,个别情况能够破例,只需距离在视觉上坚持规整即可。除了一些”PK性质”的专题模块,要留意模块栏目分布的权重,内容的主非必须明晰,排布在逻辑上有关联性。
特色模块,视觉杰出
一些要点杰出的模块要和其他栏目模块做差异规划,做到杰出而不突兀。
标题栏和模块的细节也应该重视视觉作用,较产品页面而言能够做一些润饰,但不行喧宾夺主。
网页规划 专题页规划 网站元素 logo规划
为获奖模块建立独自的款式
网页规划 专题页规划 网站元素 logo规划
标题栏的也能够依据主题规划细节
专题二级页和系列专题
一般二级页面的头图都是复用主页,但也要恰当的为每个页面添加视觉元素予以必定的差异。要留意的是添加的款式也不易过繁,因为头图的存在会显得杂乱。
假如需求打造系列专题,就要留意规划规划复用元素,比方相同的logo标题,和为着重系列感的一致视觉风格。以此强化用户的对系列专题的形象和认知。
网页规划 专题页规划 网站元素 logo规划
网页规划 专题页规划 网站元素 logo规划
网页规划 专题页规划 网站元素 logo规划
系列专题的元素logo复用以及风格一致