• 进阶篇!超实用的版式设计技巧全方位总结 - 优设网 - UISDC

    进阶篇!超实用的版式设计技巧全方位总结

    2015/05/28 38963评论区

    typesetting-skill-summery-1

    编者按:今天给大家安利一本好书,是腾讯网UED十年精华输出的干货型读物,先节选一小段,关于版式设计的,既有腾讯同学的实战经验,也有大量的基础术语科普,非常不错 >>>

    在信息化社会的浪潮中,快节奏的生活让人们开始学会选择性关注。如何在纷繁的信息中引导用户?有没有科学的方法?#31354;?#26159;当今设计师所面临的问题。界面版式的构成是信息传播的桥?#28023;?#20063;是视觉传达的重要手段。科学的编排技术,以及实用性与艺术性的合理运用,才能成就更快、更?#26082;?#30340;信息传递。时尚频道作为腾讯网中更强调视觉呈现的频道,在运营的过程?#22411;?#24120;有非常鲜明的案例。本节我们就从这些案例中剖析一些方式,来感受版面设计中的科学性和趣味性。

    ?#35745;?#30340;排列组合

    距离感

    “距离”在心理上表示亲近的程度,亲近度减弱则表示变远,亲近度增强则表示变近。在排版设计中,同样也可以用距离的远近表现各部分内容之间的亲密程?#21462;?#20363;如,通过调整各部分内容的间距,来表现各部分内容之间的关联性。但需要注意的是,过多不同的距离设定反而会违背区分其关联性的初衷。

    接下来我们来看一下时装周秀场专题界面秀场图的展示部分。由于每场大秀为相同的层级关系,所?#20113;渫计?#25490;布采用了相同的距离来展现。利用距离进行明确的组别划分,将一类的?#35745;?#36827;行整合,同时也?#33322;?#20102;?#35745;?#32321;多的压迫?#23567;?#21516;时每场秀的权重是平等的,所以运用了相同尺寸的?#35745;?#24179;铺设计,利用了组合?#35745;?#30340;反复效果,带给用户信息充足而又凝练的印象(见图1)。

    ?#35745;?#25551;述

    图1 相同的排布距离且相同尺寸的示例(?#35745;?#30001;尤目YVMIN品?#21078;?#26435;使用)

    而街拍的部分则运用大小不一的?#35745;?#25490;布,通过主次关系的区分,突出独家看点的内容,同时?#35745;?#30340;间距相同,代表它们仍然是从属于一个大环境下的平级内容,亲密度是相同的(见图2)。

    ?#35745;?#25551;述

    图2 相同的排布距离但不同尺寸的示例

    这里也运用了数学上的两个理论,对称与等?#21462;?/p>

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

    由此可以推导更多的呈?#20013;?#24335;,把这种等比递进展现的方式运用在单?#25151;?#22270;的排布方式上也会有不错的效果,其对称和缩放的原理是一致的。如同下面两个例子,如图3(a)和图3(b)所示,虽然呈现的形式为抠图的单品,但其尺寸的层级实则仅为两个层级,同时版式的排布也采用了对称的形式,因此还是有规律可循的。

    ?#35745;?#25551;述

    图3(a) 两个层级的对称排布(?#35745;?#30001;尤目YVMIN品?#21078;?#26435;使用)

    ?#35745;?#25551;述

    图3(b) 两个层级的对称排布(?#35745;?#30001;尤目YVMIN品?#21078;?#26435;使用)

    而接下来的两个例子则更加讨巧,如图4(a)和图4(b)所示,?#35745;?#23610;寸虽然只有一个层级,但却因为菱形的分割显得灵动独特。

    ?#35745;?#25551;述

    图4(a) 独特的菱形排布(?#35745;?#30001;尤目YVMIN品?#21078;?#26435;使用)

    ?#35745;?#25551;述

    图4(b) 独特的菱形排布

    节奏感

    节奏是指在自然、社会和人的活动中,与?#19979;?#32467;伴而行的有规律的突变。如音乐快慢激?#19968;?#26580;、美术?#19979;傘?#25991;学作品铺垫高潮结尾?#21462;?#22312;版式的处理上,节奏也是一个重要的元素。

    通过重复有规律的形式,可以让用户感受到某种节奏。就如同下面的例子,?#35745;?#30340;排布始终遵循着“上下上下”的摆放原则,灵动且有规律可循(见图5)。

    同时,由于这个例子运用的?#35745;?#24418;状为矩形,因此我们又要引申一个数学的规则:?#24179;?#27604;例。?#24179;?#27604;例是一个定义为( -1)/2的无理数,它被运用的层面相当广阔,例如数学、物理、建筑、美术甚?#28872;?#20048;。这个古老的数学方法所拥有的魔力在实?#25163;新?#23649;发挥着我们意想不到的作用。按照1∶1.618的?#24179;?#27604;例构成的矩形,也被认为是最理想的矩形比例。一种广为流传的说法是,?#28982;平?#27604;例更细长的矩形是一种端正的、女性的图形;与之相反,随着它逐渐趋向于正方形,这个矩形就会变得更加?#34892;?#21270;。这作为一种设计参考,还是值得借鉴和尝试的。

    接着来说节奏的应用。除了规则的形式重复以外,如果在一系列节奏中加入?#25215;?#19981;同的要素,那么构图就会发生变化,这个与其他部分不同的要素就会成为页面中的重点内容,构?#23478;不?#21464;得更?#30001;?#21160;灵活(见图6)。

    ?#35745;?#25551;述

    图5 有重复规律的摆放(?#35745;?#30001;尤目YVMIN品?#21078;?#26435;使用)

    ?#35745;?#25551;述

    图6 在重复规律中加入不同要素

    当然还有一种更为随性的版式节奏,即场景化的排布方式。如同美国20世纪50年代的老海报拼贴,如图7(a)所示,或者散落在桌面的明信片排布,如图7(b)所示,显得更为随意自然。

    ?#35745;?#25551;述

    图7(a) 场景化的排布方式——老海报拼贴

    ?#35745;?#25551;述

    图7(b) 场景化的排布方式—散落的明信片

    同时,用颜色来体现节奏则突?#23631;?#21333;纯排版的想法,以更?#21448;?#35266;的手段带给用户明确的感知,并掌握其中的规则。正如接下来的例子(见图8),虽然呈现的内容信息量不小,但6种颜色明确了其中的节奏规律,将内容进行了整合。

    ?#35745;?#25551;述

    图8 用颜色来体现节奏

    引导性

    说到引导性,比?#35745;?#25490;版(见图9)更?#21448;?#35266;的是时间轴的运用(见图10)。突出每个节点,结合之前提到过的距离和节奏的方法,呈现更?#26377;?#39062;跃动的排版形式。

    ?#35745;?#19982;文字的相辅相成

    在排版的过程中,?#35745;?#19982;文本的组合方式也是重要的问题。必须要有意识地避免将?#35745;?#30340;美观与文字的易读性相互消解,两者之间的配合非常重要。作为说明?#35745;?#20869;容的文字,它与它所说明的部位的对应关系必须是明确的(见图11)。一方面要避免?#35745;?#19982;其文字说明的距离过远,另一方面还应该尽量将某?#35745;?#30340;文字说明与容易引起误解的?#35745;?#25289;开距离。

    ?#35745;?#25551;述

    图9 用?#35745;?#25490;版实现引导性

    ?#35745;?#25551;述

    图10?用时间轴实现引导性

    ?#35745;?#25551;述

    图11 图与其说明文字的对应关系要明确

    当然,如果所有内容都?#36824;?#24230;统一化地进行了处理,则有时会起到相反的作用。在?#35745;?#30340;排版过程中,整齐中加入变化是一个不错的选择。

    另外,不要用?#35745;?#23558;文字切断,这样会损坏文字的可读性。如果在整段的文字中插入?#35745;?#37027;么阅读的视线就会被打断,用户往往不知应该从什么地方继续下去。而对于?#35745;?#20013;插入的文字,选用容易辨识的颜色是很重要的。通常最好的选择是白色或黑色。如果选用与?#35745;?#21516;色系的颜色,就会不易辨识。同时,应该尽量将文?#22336;?#32622;在不影响?#35745;?#25928;果的位置上(见图12)。

    ?#35745;?#25551;述

    图12 ?#35745;?#21644;文字互不影响效果

    文字的组合呈现

    文字的目的是使内容能够被读懂。在文字的排版中,易读性是需要重点考虑的问题。为了明?#32321;?#29616;出不同内容之间的差别,最基本的处理方式就是改变文字的字号或者颜色。对于需要重点展示的文字,可进行单独的视觉化处理。例如,在图13中,?#35745;?#19979;方的两行文字为正文采访内容的重点导读,不仅变化了颜色,还?#20113;?#36827;行了斜体处理,让用户在阅读之前就能预估一下正文是不是自己感兴趣的内容,从而决定是否阅读全文。

    ?#35745;?#25551;述

    图13 对于需要重点展示的文字进行单独的视觉化处理

    如图14所示的问答形式则以icon引领,再次遵循之前提到的节奏法则,用户可以直观地?#31169;?#21040;要阅读文章的时间成本,层级关系也一目了然。

    ?#35745;?#25551;述

    图14 以问答形式呈现文字

    而如图15所示的引号的运用,也达到了突出重点内容的效果,?#20197;?#24378;了整体氛围的代入?#23567;?/p>

    ?#35745;?#25551;述

    图15 运用引号突出重点文字

    图解的传达

    即便是传递相同的信息,单纯的文字表现方式与?#24615;?#20102;视觉要素的表现方式也会带给用户不同的印象。如果通过单纯的文字表现无法让读者迅速理解信息,则可以通过视觉化的处理使内容变得易于把握。那些用文字方式表现时显得冗长的说明,一旦换成视觉化的表现方式就会马上清晰明了。图解起到了凝缩信息内容、增加图像比重的作用。

    如图16所示,将数据分别用不同的颜色以量化形式呈现,能够便于读者直观地理解其中的内容。图中对复杂的内容进行了合理整合,按照大类别逐个进行了分析。并?#20197;?#29992;了圆饼图、长条图、曲线图的变形,来实现其视觉传达的目的。对于通过颜色区分各部分的应用,需采用对?#35748;?#26126;、同色系或对比色系的处理,以颜色的明暗来区分其中的差别。

    ?#35745;?#25551;述

    图16 ?#20801;?#25454;的图?#20301;?#22788;理

    如图17所示是对黑眼圈的专题描述,如果单纯用文字描述,则用户将很难理解氛围和场景。用熊猫拟人化体现,在增加了趣味性的同时,还让用户在轻松愉快的氛围中?#31169;?#20102;所表述的内容。

    ?#35745;?#25551;述

    图17黑眼圈专题

    “DIOR迷醉东京”案例分析:一场樱花飞舞的视觉盛宴

    该项目的最初需求是要有日本气息的DIOR潮流?#23567;?#25215;载的内容为?#20064;?#31934;神-2015东京大秀的独家专访,以及现场?#35745;?#25512;送,其中包括访谈、点?#39304;⑼计?#20449;息展示的功能。

    ?#31169;?#20102;情境之后,如何用科学的方法进行设计呢?首先就是主题的突出,由于秀场位于日本东京,所以日式的元素必不可少。由此进行发散,提炼出关键?#35270;?#33457;、折?#21462;?#31109;意。因此封面气?#25214;?#22823;面积樱花铺底营造,主题仅对文字进行排列,以衬线体的英文与中文组合,放大所要重点突出的内容“迷醉东京”及“DIOR?#20445;?#24182;在保证英文识别度的基础上,?#20113;?#36827;行切割,运用距离与节奏的方法,体现主题的主次关系。线描樱花的处理则是基于禅意对于圆满的?#38750;螅?#36816;用点、线、面的基本组合原理,搭建视觉?#34892;?#30340;完整性。两侧日文“DIOR”的点?#28023;?#22312;细节处强调日式东方的气息,不抢镜?#24067;?#20998;。引导进度条以折扇的形状作为引导,运用之前谈到的时间轴的引导方法,保证用户在浏览的过程中掌握阅读的进度,对自己的浏览有心理预估(见图18)。

    ?#35745;?#25551;述

    图18 封面设计

    内部内页更多承载的是信息的输出,因此应避免大面积的氛围强调。为保证基调性的统一,我们以禅意的麻布质感铺底,两侧仅放出樱花盛放枝头的?#30001;歟?#19982;封面氛围呼应。关于内容信息如何良好输出,这里以专访页面和后台细节为例简单分析一下。

    首先看专访页面(见图19),由于界面?#34892;?#25215;载着专访人物、主打妆容作品、好友寄语及专访对话四大内容,因此如何处理它们之间的逻辑关系则是首要问题。首先,抓住核心主体,即为专访人物Peter,而所有的内容承载?#23478;运?#20026;?#34892;?#36827;行展开,因此在视觉比重上他的?#35745;?#20063;被着重强调,其主打的妆容作品围绕在周围但小于主体。这里运用了不同的形状,从而使间隔看?#20808;?#26356;大。

    这里抛弃了方图的处理方式而运用了圆图的处理方式,在信息量大的排版中,巧妙营造了透气效果。好友寄语部分以便签变形的形式体现,区别于主体的功能性,作为辅助性功能点缀。最后则是专访对话内容的呈现,由于权重?#32454;擼?#21516;样留有较大的布局处理。问答的形式运用了之前提到过的文字排版法则,用不同的颜色区分不同层级的内容,营造阅读的节奏?#23567;?/p>

    ?#35745;?#25551;述

    图19 专访页面设计(人物?#35745;?#30001;尤目YVMIN品?#21078;?#26435;使用)

    后台细节页面(见图20)同样运用了对称与等比的法则。但在此对称的设计中,运用了不规则的处理方式,以发散的形式呈现?#35745;?#30340;排版,营造若有若无的动?#23567;?#21516;样,为方便需求方的自动调取,?#35745;?#20173;采取等比的处理方式,降低维护成本。?#35745;?#30340;尺寸仅设置了大、?#23567;?#23567;三个层级,调解了其平衡关系的同时又有规律可循。

    ?#35745;?#25551;述

    图20 后台细节页面设计(图为展示DEMO)

    对于整体界面的呈现,设计师进行了有目的性的留白,迎合禅意的主旨。留白的目的是减轻用户浏览的压迫感,赋予界面构成以变化感,让其得到更多的扩展空间,从而达到宁静的氛围营造效果。背景点与线的搭配,在功能上对相似内容进行了分类统一,同时建立界面版式的平衡?#23567;?#39029;面的主体内容在1000px之内,保证了宽窄屏用户的无损浏览,但对于大屏用户的浏览体验,就会显得过于?#35757;?#25152;以在页面1000px以外,对日文“DIOR”进行了拆分排版,力求该用户人群浏览的视觉?#26639;小?/p>

    同时,此项目也配以HTML5的响应式设计,保证了移动端用户的浏览需求,其设计氛围与PC端视觉统一,但对复杂元素进行了拆分与删减,更?#29992;?#30830;信息的主体,利用移动端自身的优势增加了满屏大图的展示,在强调视觉效果的同时也便于用户细致浏?#39304;?#36890;篇界面樱花花瓣缓缓飞舞,所营造的气息自然扑面而来(见图21)。

    ?#35745;?#25551;述

    图21 整体界面的呈现

    总结

    总结本小节的内容可以看到,一切的版面设计都是基于内容的存在,体现内容的主题思想,用视觉化的手段增强读者的注意力与理解力,以科学的方式实现层级递进的效果。大视觉、小细节,一个都不能少。

    本次精选了?#35835;?#27963;的版式造就视觉盛宴》与大家分享,近期还将分享?#24230;?#31243;魔方3D旋转界面》、《体育,在腾讯也在现场》、?#26029;?#24212;式设计—?#25353;?#23478;”栏目》这几个生动案例,让我们通过这些例子看看UED设计师们如何成就优秀的用户体验!

    近距离感受专业设计师的教程戳下:

    一秒让文本变身的实用方法!
    《经验分享!超实用的文本处理技巧》

    平面排版苦手必备!方法简单有效!
    《平面排版时,教你突出中文美感的几种方法》

    图文排版的年度最佳教程!木有之一!
    《超全面教程!给照片添加文字有哪10个高大上的方法?》

    投稿者:博文视点

    【优设网 原创文章 投稿邮箱:[email protected]

    ================关于优设网================
    “优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
    【特色推荐】
    设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
    设计微博:拥有粉丝量95万的人气微博@优秀网页设计 ,?#38431;?#20851;注获取网页设计资源、下载顶尖设计素材。
    设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
    ———————————————————–
    想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
    添加 优秀网页设计 微信号:【youshege】优设哥的全拼
    您也可以通过扫描下方二维码快速添加:

    sdcweixin

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/typesetting-skill-summery

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    设计师 扁?#20132;?#35774;计 版式设计 交互设计师 界面设计 排版布局 职场 优设专访 优设大课堂 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 用户体验设计 设计趋势 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您?#22993;?#26377;登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立至今,一直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码
  • 福利彩票图纸第一版 600w彩票网时时彩票 波叔一波图片 秒速赛直播历史记录 安徽福彩15选五走势图 麻将捡对子怎么摆放 第55期一码中特 胜负彩推荐预测 五分赛车官方开奖 新疆时时走势图 深圳风采最新开奖结果查询 脱衣麻将 吉林时时计划软件手机版 青海十一选五中奖规则 7星彩玩法说明 大乐透复式7十2多少钱