企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

建站知识

Website development

上海网站设计云智用的版式设计技巧全方位总结

发布时间:2015-12-17 08:41:01

TAGS:手机网站制作视频教程,php网站制作教程

在信息化社会的浪潮中,快节奏的生活让人们开始学会选择性关注。如何在纷繁的信息中引导客户?有没有科学的办法?这是当今设计师所面临的难题。界面 版式的构成是信息传播的桥梁,也是视觉传达的重要手段。科学的编排技术,以及实用性与艺术性的合理运用,才能成就更快、更准确的信息传递。时尚频道作为腾 讯网中更强调视觉呈现的频道,在运营的过程中通常有非常鲜明的案例。我们就从这些案例中剖析一些方式,来感受版面设计中的科学性和趣味性。
TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图片的排列组合TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

距离感
TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

“距离”在心理上表示亲近的程度,亲近度减弱则表示变远,亲近度增强则表示变近。在排版设计中,同样也可以用距离的远近表现各部分内容之间的亲密程度。例如,通过调整各部分内容的间距,来表现各部分内容之间的关联性。但必需留意的是,过多不同的距离设定反而会违背区分其关联性的初衷。
TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

接下来我们来看一下时装周秀场专题界面秀场图的展示部分。由于每场大秀为相同的层级关系,所以其图片排布采用了相同的距离来展现。利用距离进行明确 的组别划分,将一类的图片进行整合,同时也缓解了图片繁多的压迫感。同时每场秀的权重是平等的,所以运用了相同尺寸的图片平铺设计,利用了组合图片的反复效果,带给客户信息充足而又凝练的印象(见图1)。
TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图1 相同的排布距离且相同尺寸的示例(图片由尤目YVMIN品牌授权使用)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而街拍的部分则运用大小不一的图片排布,通过主次关系的区分,突出独家看点的内容,同时图片的间距相同,代表它们仍然是从属于一个大环境下的平级内容,亲密度是相同的(见图2)。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图2 相同的排布距离但不同尺寸的示例TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这里也运用了数学上的两个理论,对称与等比。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对称构图有左右对称与上下对称等形式。对称的构图方式能够给客户带来一种整齐安定的印象。在基本的对称形式上加入一些微妙的变化,也会给客户带来惊 喜,就如同此案例在对称的基础上进行了垂直翻转的处理。在设计此版块的前期,需求方提出此版块的内容为自动调取,均为正方图。因此我们运用了等比缩放的图 片处理,减少了后期维护的工作成本,调取一张图片后,简单的JavaScript代码即可实现将其运用在任何位置,并保证其达到需求的呈现质量。同时,通 过图片大小的不同,明确了图片之间的主次关系。为避免尺寸类型过多带来的杂乱感,我们只设置了大、中、小三个层级的尺寸,并调整了其平衡关系。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

由此可以推导更多的呈现形式,把这种等比递进展现的方式运用在单品抠图的排布方式上也会有不错的效果,其对称和缩放的原理是一致的。如同下面两个例 子,如图3(a)和图3(b)所示,虽然呈现的形式为抠图的单品,但其尺寸的层级实则仅为两个层级,同时版式的排布也采用了对称的形式,因此还是有规律可 循的。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图3(a) 两个层级的对称排布(图片由尤目YVMIN品牌授权使用)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图3(b) 两个层级的对称排布(图片由尤目YVMIN品牌授权使用)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而接下来的两个例子则更加讨巧,如图4(a)和图4(b)所示,图片尺寸虽然只有一个层级,但却因为菱形的分割显得灵动独特。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图4(a) 独特的菱形排布(图片由尤目YVMIN品牌授权使用)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图4(b) 独特的菱形排布TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

节奏感TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

节奏是指在自然、社会和人的活动中,与韵律结伴而行的有规律的突变。如音乐快慢激烈缓柔、美术韵律、文学作品铺垫高潮结尾等。在版式的处理上,节奏也是一个重要的元素。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

通过重复有规律的形式,可以让客户感受到某种节奏。就如同下面的例子,图片的排布始终遵循着“上下上下”的摆放原则,灵动且有规律可循(见图5)。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

同时,由于这个例子运用的图片形状为矩形,因此我们又要引申一个数学的规则:黄金比例。黄金比例是一个定义为( -1)/2的无理数,它被运用的层面相当广阔,例如数学、物理、建筑、美术甚至音乐。这个古老的数学办法所拥有的魔力在实际中屡屡发挥着我们意想不到的作 用。按照1∶1.618的黄金比例构成的矩形,也被认为是理想的矩形比例。一种广为流传的说法是,比黄金比例更细长的矩形是一种端正的、女性的图形;与 之相反,随着它逐渐趋向于正方形,这个矩形就会变得更加男性化。这作为一种设计参考,还是值得借鉴和尝试的。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

接着来说节奏的应用。除了规则的形式重复以外,假如在一系列节奏中加入某些不同的要素,那么构图就会发生变化,这个与其他部分不同的要素就会成为页面中的要点内容,构图也会变得更加生动灵活(见图6)。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图5 有重复规律的摆放(图片由尤目YVMIN品牌授权使用)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图6 在重复规律中加入不同要素TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当然还有一种更为随性的版式节奏,即场景化的排布方式。如同美国20世纪50年代的老海报拼贴,如图7(a)所示,或者散落在桌面的明信片排布,如图7(b)所示,显得更为随意自然。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图7(a) 场景化的排布方式——老海报拼贴TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图7(b) 场景化的排布方式—散落的明信片TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

同时,用颜色来体现节奏则突破了单纯排版的想法,以更加直观的手段带给客户明确的感知,并掌握其中的规则。正如接下来的例子(见图8),虽然呈现的内容信息量不小,但6种颜色明确了其中的节奏规律,将内容进行了整合。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图8 用颜色来体现节奏TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

说到引导性,比图片排版(见图9)更加直观的是时间轴的运用(见图10)。突出每个节点,结合之前提到过的距离和节奏的办法,呈现更加新颖跃动的排版形式。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图片与文字的相辅相成TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在排版的过程中,图片与文本的组合方式也是重要的难题。必须要有意识地避免将图片的美观与文字的易读性相互消解,两者之间的配合非常重要。作为说明 图片内容的文字,它与它所说明的部位的对应关系必须是明确的(见图11)。一方面要避免图片与其文字说明的距离过远,另一方面还应该尽量将某图片的文字说 明与容易引起误解的图片拉开距离。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图片描述TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图9 用图片排版实现引导性TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

QQ图片20151217131406.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图10 用时间轴实现引导性TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

5d97f5650fcdda28be5fea3c277871a9.jpgTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图11 图与其说明文字的对应关系要明确TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

当然,假如所有内容都被过度统一化地进行了处理,则有时会起到相反的作用。在图片的排版过程中,整齐中加入变化是一个不错的选择。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

另外,不要用图片将文字切断,这样会损坏文字的可读性。假如在整段的文字中插入图片,那么阅读的视线就会被打断,客户往往不知应该从什么地方继续下 去。而对于图片中插入的文字,选用容易辨识的颜色是很重要的。通常好的选择是白色或黑色。假如选用与图片同色系的颜色,就会不易辨识。同时,应该尽量将 文字放置在不影响图片效果的位置上(见图12)。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图12 图片和文字互不影响效果TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

文字的组合呈现TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

文字的目的是使内容能够被读懂。在文字的排版中,易读性是必需要点考虑的难题。为了明确表现出不同内容之间的差别,基本的处理方式就是改变文字的 字号或者颜色。对于必需要点展示的文字,可进行单独的视觉化处理。例如,在图13中,图片下方的两行文字为正文采访内容的要点导读,不仅变化了颜色,还对 其进行了斜体处理,让客户在阅读之前就能预估一下正文是不是自己感兴趣的内容,从而决定是否阅读全文。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图13 对于必需要点展示的文字进行单独的视觉化处理TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如图14所示的问答形式则以icon引领,再次遵循之前提到的节奏法则,客户可以直观地知晓到要阅读文章的时间成本,层级关系也一目了然。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

f9b14fa1ce0916c806ee4cee711382b7.jpgTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图14 以问答形式呈现文字TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

而如图15所示的引号的运用,也达到了突出要点内容的效果,且增强了整体氛围的代入感。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图15 运用引号突出要点文字TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图解的传达TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

即便是传递相同的信息,单纯的文字表现方式与夹杂了视觉要素的表现方式也会带给客户不同的印象。假如通过单纯的文字表现无法让读者快速理解信息,则 可以通过视觉化的处理使内容变得易于把握。那些用文字方式表现时显得冗长的说明,一旦换成视觉化的表现方式就会马上清晰明了。图解起到了凝缩信息内容、增 加图像比重的作用。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如图16所示,将数据分别用不同的颜色以量化形式呈现,能够便于读者直观地理解其中的内容。图中对复杂的内容进行了合理整合,按照大类别逐个进行了 分析。并且运用了圆饼图、长条图、曲线图的变形,来实现其视觉传达的目的。对于通过颜色区分各部分的应用,需采用对比鲜明、同色系或对比色系的处理,以颜 色的明暗来区分其中的差别。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图16 对数据的图形化处理TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如图17所示是对黑眼圈的专题描述,假如单纯用文字描述,则客户将很难理解氛围和场景。用熊猫拟人化体现,在增加了趣味性的同时,还让客户在轻松愉快的氛围中知晓了所表述的内容。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图17黑眼圈专题TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

“DIOR迷醉东京”案例分析:一场樱花飞舞的视觉盛宴TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

该项目的初需求是要有日本气息的DIOR潮流感。承载的内容为迪奥精神-2015东京大秀的独家专访,以及现场图片推送,其中包括访谈、点评、图片信息展示的功能。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

知晓了情境之后,如何用科学的办法进行设计呢?首先就是主题的突出,由于秀场位于日本东京,所以日式的元素必不可少。由此进行发散,提炼出关键词樱 花、折扇、禅意。因此封面气氛以大面积樱花铺底营造,主题仅对文字进行排列,以衬线体的英文与中文组合,放大所要要点突出的内容“迷醉东京”及 “DIOR”,并在保证英文识别度的基础上,对其进行切割,运用距离与节奏的办法,体现主题的主次关系。线描樱花的处理则是基于禅意对于圆满的追求,运用 点、线、面的基本组合原理,搭建视觉中心的完整性。两侧日文“DIOR”的点缀,在细节处强调日式东方的气息,不抢镜也加分。引导进度条以折扇的形状作为 引导,运用之前谈到的时间轴的引导办法,保证客户在浏览的过程中掌握阅读的进度,对自己的浏览有心理预估(见图18)。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图18 封面设计TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

内部内页更多承载的是信息的输出,因此应避免大面积的氛围强调。为保证基调性的统一,我们以禅意的麻布质感铺底,两侧仅放出樱花盛放枝头的延伸,与封面氛围呼应。关于内容信息如何良好输出,这里以专访页面和后台细节为例简单分析一下。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

首先看专访页面(见图19),由于界面中需承载着专访人物、主打妆容作品、好友寄语及专访对话四大内容,因此如何处理它们之间的逻辑关系则是首要问 题。首先,抓住核心主体,即为专访人物Peter,而所有的内容承载都以他为中心进行展开,因此在视觉比重上他的图片也被着重强调,其主打的妆容作品围绕 在周围但小于主体。这里运用了不同的形状,从而使间隔看上去更大。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

这里抛弃了方图的处理方式而运用了圆图的处理方式,在信息量大的排版中,巧妙营造了透气效果。好友寄语部分以便签变形的形式体现,区别于主体的功能 性,作为辅助性功能点缀。后则是专访对话内容的呈现,由于权重较高,同样留有较大的布局处理。问答的形式运用了之前提到过的文字排版法则,用不同的颜色 区分不同层级的内容,营造阅读的节奏感。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图19 专访页面设计(人物图片由尤目YVMIN品牌授权使用)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

后台细节页面(见图20)同样运用了对称与等比的法则。但在此对称的设计中,运用了不规则的处理方式,以发散的形式呈现图片的排版,营造若有若无的 动感。同样,为方便需求方的自动调取,图片仍采取等比的处理方式,降低维护成本。图片的尺寸仅设置了大、中、小三个层级,调解了其平衡关系的同时又有规律 可循。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图20 后台细节页面设计(图为展示DEMO)TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对于整体界面的呈现,设计师进行了有目的性的留白,迎合禅意的主旨。留白的目的是减轻客户浏览的压迫感,赋予界面构成以变化感,让其得到更多的扩展 空间,从而达到宁静的氛围营造效果。背景点与线的搭配,在功能上对相似内容进行了分类统一,同时建立界面版式的平衡感。页面的主体内容在1000px之 内,保证了宽窄屏客户的无损浏览,但对于大屏客户的浏览体验,就会显得过于寡淡,所以在页面1000px以外,对日文“DIOR”进行了拆分排版,力求该 客户人群浏览的视觉美感。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

同时,此项目也配以HTML5的响应式设计,保证了移动端客户的浏览需求,其设计氛围与PC端视觉统一,但对复杂元素进行了拆分与删减,更加明确信 息的主体,利用移动端自身的优势增加了满屏大图的展示,在强调视觉效果的同时也便于客户细致浏览。通篇界面樱花花瓣缓缓飞舞,所营造的气息自然扑面而来 (见图21)。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

blob.pngTmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

图21 整体界面的呈现TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

总结TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

总结本小节的内容可以看到,一切的版面设计全是基于内容的存在,体现内容的主题思想,用视觉化的手段增强读者的留意力与理解力,以科学的方式实现层级递进的效果。大视觉、小细节,一个都不能少。TmX上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

原创不易,未经授权,严禁转载

原文地址:/i,72,6276,0.html

客户评价

更多+
  • 感谢特马资料qq群,系统提前完成,在整个项目周期内,特马资料qq群对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的特马资料qq群团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。假如想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的特马资料qq群(上海)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,要点是响应速度蛮快,有什么难题都会马上给你解决,公司很满意,因为他们全是针对每个项目建了相应的讨论组,有难题可以再里面提出,人员分工到位,解决难题很及时。

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!