書名:《形式感-網(wǎng)頁視覺設(shè)計(jì)創(chuàng)意拓展與快速表現(xiàn)》
作者:晉小彥
出版社:清華大學(xué)出版社
一、抄現(xiàn)實(shí)
抄現(xiàn)實(shí)是我們?cè)谠O(shè)計(jì)中最直接也是常用的一種方法,它顧名思義就是抄襲現(xiàn)實(shí)中存在的事物贸诚。因?yàn)槠浣Y(jié)果直接與主題相關(guān)聯(lián),所以抄現(xiàn)實(shí)的方法可以讓視覺顯得更整體,主題更突出方庭。它將抽像的主題通過實(shí)體表達(dá)出來,并以之做為內(nèi)容信息的載體,從而在第一視覺上直觀地體現(xiàn)了核心內(nèi)容并突出主題。
說說酱固,就是抄襲現(xiàn)實(shí)中的物體二鳄,通過現(xiàn)實(shí)生活中具象的物體,提煉出直觀直接的元素作為創(chuàng)作基調(diào)媒怯,或者激發(fā)靈感的起點(diǎn)订讼。
想想,抄現(xiàn)實(shí)的三步驟:減法扇苞、分塊欺殿、加法寄纵。
減法就是參考素材的高度提煉,使用戶既能辨別抄襲物體又能有自由的空間從事設(shè)計(jì)(提煉特征脖苏、審查刪除重復(fù)描述)程拭;
分塊就是內(nèi)容與板塊的結(jié)合和排版(對(duì)信息進(jìn)行消化,吃透信息棍潘,分層主次)
加法就是完善信息內(nèi)容恃鞋,使畫面達(dá)到一種最優(yōu)表達(dá)。(具體內(nèi)容填充亦歉,氣氛和視覺補(bǔ)充恤浪,特征還原和細(xì)節(jié)補(bǔ)充)
做做,實(shí)際操作中要為主題選擇合適的“抄現(xiàn)實(shí)”目標(biāo)肴楷,進(jìn)行特征提煉水由,把握內(nèi)容排版與抄襲目標(biāo)的關(guān)系,并會(huì)注意細(xì)節(jié)搭配赛蔫,讓整體更加生動(dòng)砂客。
1、需求分析
a呵恢、主題——b鞠值、排版預(yù)想——c、現(xiàn)有素材——d渗钉、總結(jié)平衡
2彤恶、設(shè)計(jì)分解
a、減法——b晌姚、分塊——c粤剧、加法歇竟。
3挥唠、頁面展示
二、圓焕议、方宝磨、三角
兒時(shí)玩的七巧板,我們?cè)盟?jiǎn)單地拼出想象中的各種動(dòng)物花鳥盅安,更有天馬行空的奇異組合唤锉。最基礎(chǔ)的幾何形體也是網(wǎng)頁造型結(jié)構(gòu)元素的歸納,再豐富的萬物也可以用幾何形體去組成”鸩t,F(xiàn)在我們利于這些基礎(chǔ)幾何圖案進(jìn)行網(wǎng)頁的框架打造窿祥。
說說,圓蝙寨、方晒衩、三角作為自然界最基礎(chǔ)的三種形狀嗤瞎,它們分別由直線、折線听系、弧線組成贝奇。
我們要先熟悉它們的特質(zhì):
圓,外形光滑圓潤(rùn)飽滿靠胜,可愛靈動(dòng)掉瞳、親和力。
方浪漠,橫平豎直陕习,規(guī)規(guī)矩矩,整潔好處理郑藏,莊重衡查、嚴(yán)肅、情感內(nèi)斂的主題必盖,但有時(shí)也會(huì)呆板生硬拌牲。
三角,穩(wěn)定性強(qiáng)歌粥、強(qiáng)烈的情感刺激和反差塌忽,傾斜的角度會(huì)給人帶來速度感。運(yùn)動(dòng)的失驶、時(shí)尚的土居、尖銳的、速度感嬉探、暴力擦耀、刺激等主題中。
圓涩堤、方眷蜓、三角設(shè)計(jì)方法的優(yōu)點(diǎn)
1、打破習(xí)慣性思路
2胎围、理性把握主線情感
3吁系、變幻靈活
想想,設(shè)計(jì)是一個(gè)?理性+運(yùn)氣+聯(lián)想?的過程白魂。
做做汽纤,圓、方福荸、三角的思路是一個(gè)從無到有的嘗試過程蕴坪,在虛無的嘗試過程中,我們唯一可以把握的是它們的形態(tài)情感敬锐,讓這種形態(tài)情感牽引這我們背传,首先主形的選擇很重要捆等,其次三種形態(tài)的配合,第三是形態(tài)的主題聯(lián)想與造型實(shí)現(xiàn)续室。在這個(gè)過程中我們必須兼顧信息的體量和形式栋烤,使其達(dá)到平衡美。
1挺狰、需求分析
a明郭、主題——b、關(guān)鍵詞聯(lián)想——c丰泊、圓薯定、方、三角的主形選擇——d瞳购、排版預(yù)想
2话侄、設(shè)計(jì)分解
a、感性三步:迷茫和堅(jiān)持——漸入佳境——情投意合
b学赛、理性三步:打大框架——為內(nèi)容進(jìn)行布局調(diào)整——擺文字和圖片
3年堆、頁面展示
設(shè)計(jì)是一個(gè)理性+運(yùn)氣+聯(lián)想的過程,感性三步盏浇、理性三步变丧。太多感性則可能會(huì)使受眾面狹窄或者偏離主題;太過理性則顯得呆板俗套绢掰。圓痒蓬、方、三角不僅需要三個(gè)元素的形態(tài)主次結(jié)合滴劲,也需要感性和理性的雙向互動(dòng)配合攻晒。
三、斷臂之美
因?yàn)闅埲卑嗤冢辛伺c眾不同的故事和特點(diǎn)鲁捏,它的主題性和目標(biāo)性比起完美的東西顯得更加強(qiáng)烈,有時(shí)候聪姿,我甚至相信:只有殘缺的東西才是美麗的碴萧。
想想乙嘀, 去掉局部末购、選取局部、替換局部虎谢。因?yàn)闅埲泵肆瘢辛伺c眾不同的故事和特點(diǎn),他的主題性和目標(biāo)性比起完美的東西顯得更強(qiáng)烈婴噩。人們會(huì)相信殘缺的東西才是最美的擎场。
去掉局部:去掉局部是在原先完整的整體上,為了更好地突出羽德、說明事物的特征和主題而刪去了其中某一部分,它為主題的表現(xiàn)排除了視覺干擾,使中心更加明確。去掉局部和選取局部在某些情況下是相對(duì)而言的,但兩者都可以做為一種獨(dú)立的思路而存在迅办。
選取局部:選取局部通常因?yàn)檫x取的這個(gè)部分是特征的集中表現(xiàn),它的獨(dú)立存在能代表并放大整體的中心思想使主題更加明確情感更加集中,起到以少見多宅静、以小見大的功效。
替換局部:替換局部是使用更能表現(xiàn)主題的事物來替代特定的局部,從而使主題突岀站欺。局部的替換一方面可以打破觀者的習(xí)慣性視覺,另一方面替換事物的獨(dú)立風(fēng)格與原有整體結(jié)合后,特征更加明顯,引發(fā)更多的延伸思考姨夹。去掉局部、選取局部矾策、替換局部都是通過不同途徑和手法來放大特征的方法,為人們排除干擾磷账、選擇重點(diǎn)或替換來強(qiáng)化表現(xiàn)。電影鏡頭和海報(bào)中也時(shí)常用到這樣的斷臂局部描寫,當(dāng)我們習(xí)慣了處在某種環(huán)境之下,因?yàn)樗牧?xí)慣性使我們的行為不會(huì)經(jīng)過大腦的思考只憑借潛意識(shí)進(jìn)行,但如果我們換了一個(gè)視角,變換了處境,我們的思維又會(huì)再一次活躍起來,這也是斷臂手術(shù)的功效之所在贾虽。
四逃糟、欲擒故縱
需求人和設(shè)計(jì)人之間的矛盾是設(shè)計(jì)的永恒話題,如果處理不好通常會(huì)把雙方推向無休止的互鉆牛角尖的爭(zhēng)論,在許多需求方的眼中通常沒有最重點(diǎn),只有更重點(diǎn)。不過近兩年中國(guó)的設(shè)計(jì)環(huán)境似乎稍有改善蓬豁。
設(shè)計(jì)過程中,我們的周圍經(jīng)常會(huì)充斥著這樣的聲音這個(gè)部分再放大一些,這個(gè)顏色再明亮一些,我們需要更炫的效果…通常在這樣的聲音充斥下我們很容易簡(jiǎn)單地使用加法,進(jìn)行放大加粗提亮,導(dǎo)致整個(gè)畫面充滿了重點(diǎn),充滿了重點(diǎn)也就意味著再次失去重點(diǎn)绰咽。
說說,面對(duì)需求的逆向思維設(shè)計(jì)方法
它是對(duì)設(shè)計(jì)需求的逆向理解思維,特別是針對(duì)變換和修改過程中的需求地粪,它通過反向的思維打破和彌補(bǔ)習(xí)慣性的思路,井通過這一思路創(chuàng)造出不同一般的頁面布局剃诅。
需求人和設(shè)計(jì)人之間的矛盾是設(shè)計(jì)的永恒話題,需求人與設(shè)計(jì)人之間的修改比拼,不僅是智商的比拼,還是情商的比拼,如果處理不好通常會(huì)把雙方推向無休止的互鉆牛角尖的爭(zhēng)論驶忌。欲擒故縱不論在溝通還是設(shè)計(jì)修改中都是一個(gè)可以選擇的辦法矛辕。
網(wǎng)頁設(shè)計(jì)中的“擒”與“縱”,突出與減弱我們應(yīng)該如何應(yīng)對(duì)付魔。
想想聊品、突出也可以通過減弱來獲得。突出,我們?cè)撊绾螒?yīng)對(duì),習(xí)慣性的加強(qiáng)法可能使排版越來越擁擠,本章推薦的是適當(dāng)?shù)氖褂脺p法,也同樣能達(dá)到突出的目的几苍。
突出可以理解成是一個(gè)相對(duì)的詞語——相對(duì)的突出翻屈。這種情況下我們除了加強(qiáng)本體而產(chǎn)生突出的效果,也可以通過削弱其他個(gè)體從而產(chǎn)生本體的突出效果,所以,我們來做個(gè)小實(shí)驗(yàn)。
加強(qiáng)法是基于重點(diǎn)7號(hào)球本體展開,我們?cè)谏屎徒Y(jié)構(gòu)上進(jìn)行加強(qiáng)法操作妻坝。
色彩加強(qiáng)法包括加強(qiáng)明度伸眶、飽合度等使其更明亮、更顯眼刽宪。
結(jié)構(gòu)加強(qiáng)法包括:變大厘贼、變形、增加標(biāo)識(shí)等圣拄。
減弱法是在重點(diǎn)7號(hào)球以外的球體進(jìn)行操作,我們?cè)谏屎徒Y(jié)構(gòu)上對(duì)其進(jìn)行減弱處理嘴秸。色彩減弱法包括降低其他物體的明度、飽合度.透明度等,使主體更加突出。
結(jié)構(gòu)減弱法包括:減小其他物體的大小來使主體更大岳掐、更突出凭疮。
加法
加法是在原有設(shè)計(jì)基礎(chǔ)上,增加、突出串述、放大执解、強(qiáng)化某個(gè)特定部分使其得到突出。加法本身井沒有問題,它是一種比較直接的思路,不論是需求方還是設(shè)計(jì)人都會(huì)下意識(shí)地使用這種辦法,但是物極必反,過于頻繁地單一使用加法往往會(huì)把自己通上絕路纲酗。
減法
欲璃故縱里的減法是通過減少材鹦、縮小、弱化其他部分使某個(gè)特定部分得到突出這是一種逆向思維耕姊。配合加法一起使用桶唐,可以避免畫面過說擁擠、刺眼茉兰。
滿
滿“的目的本身是希望用戶能夠看到井吸收更多信息,但呈現(xiàn)井不表示會(huì)被看到,而看到也井不代表會(huì)被記住尤泽。如何更好地梳理閱讀,讓用戶保持愉快的閱讀心態(tài),讓信息在合適的時(shí)候出現(xiàn)才能真正達(dá)到滿的目的。
空
空在語義上似乎處于“滿的對(duì)立面规脸。但它對(duì)內(nèi)容的吸收率往往可能比“滿更高坯约。留白可以帶給信息更好的閱讀性也為設(shè)計(jì)帶來更高的品質(zhì)感。如果在擁擠的路上走得疲憊不堪的我們,不如反其道而行,欲擒故縱,下面我們就將法碼移向右面,來看看“空境的別樣風(fēng)景莫鸭。
五闹丐、乾坤大挪移
時(shí)間短、沒點(diǎn)子被因、沒創(chuàng)意,又要快速捕捉眼球,怎么辦?
對(duì)頁面整體進(jìn)行旋轉(zhuǎn)和平移是快速改變視覺的快速有效方法它打破了正常的網(wǎng)頁視覺習(xí)慣,吸引了觀眾的注意力卿拴。
說說:旋轉(zhuǎn)和平移
打破正常的視覺習(xí)慣,不對(duì)稱和斜線條的視覺也可以造成設(shè)計(jì)上的速度感的沖擊力。這是一個(gè)相對(duì)通用的辦法,在沒有更好的點(diǎn)子和創(chuàng)意的情況下,不妨嘗試使用梨与。
想想:旋轉(zhuǎn)可能會(huì)給我們帶來的問題
(1)信息量的限制
由于旋轉(zhuǎn)的構(gòu)圖堕花,斜線與面邊、面框最終會(huì)有一個(gè)交界點(diǎn)粥鞋,可能導(dǎo)致信息不能無限制的延續(xù)缘挽。
(2)排版的限制
由于旋轉(zhuǎn)的形式需要整體的配合,而有部分素材無法配合旋轉(zhuǎn)就會(huì)比較費(fèi)時(shí)間去歸納處理呻粹。
(3)瀏覽舒適性問題
由于角度傾斜打破了習(xí)慣性視覺壕曼,在提神的同時(shí)也會(huì)給瀏覽造成一定的困難和不舒適。
旋轉(zhuǎn)可以分為以下幾種:
(1)整體旋轉(zhuǎn):背景和內(nèi)容一起旋轉(zhuǎn),需要注意兩條邊緣線等浊,一是要保持旋轉(zhuǎn)的邊緣線整齊腮郊,另外也要注意旋轉(zhuǎn)后的內(nèi)容不能超出1000像素寬度。為了兼顧信息的可閱讀性凿掂,背景和內(nèi)容同時(shí)旋轉(zhuǎn)的角度盡量不要超過15度伴榔。
(2)背景旋轉(zhuǎn):背景旋轉(zhuǎn),信息內(nèi)容保持不變庄萎。這種旋轉(zhuǎn)既可以產(chǎn)生旋轉(zhuǎn)的視覺形式感踪少,又可以保證文字信息的閱讀性,是推薦和常用的方式糠涛。但信息排版同樣也受到斜線的1000像素寬度的限制援奢,在具體操作中需要進(jìn)行細(xì)節(jié)的調(diào)整。
(3)綜合旋轉(zhuǎn):根據(jù)內(nèi)容結(jié)構(gòu)進(jìn)行有選擇的部分旋轉(zhuǎn)忍捡。通常選擇內(nèi)容文字較少的 SLOGAN跟隨背景一同旋轉(zhuǎn)共同達(dá)到旋轉(zhuǎn)的形式感集漾。信息量較多的正文保持水平不變,以方便閱讀砸脊。這種方式也經(jīng)常被使用具篇。
六、雜志版式
經(jīng)驗(yàn)是把雙刃劍凌埂,既能高效完成設(shè)計(jì)任務(wù)驱显,同時(shí)也會(huì)束縛我們的思維,網(wǎng)頁設(shè)計(jì)也是隨著軟硬件的發(fā)展瞳抓,網(wǎng)頁展示情況逐漸豐富埃疫,我們可以嘗試進(jìn)入其他設(shè)計(jì)體系,讓不一樣的環(huán)境刺激我們的靈感孩哑。像雜志版式學(xué)習(xí)栓霜,是我們嘗試邁出思維局限的第一步,
說說:消除平面設(shè)計(jì)邊界横蜒,像雜志版式學(xué)習(xí)
為什么可以向雜志學(xué)習(xí)胳蛮?
1、紙媒先于媒體平面設(shè)計(jì)丛晌,設(shè)計(jì)經(jīng)驗(yàn)豐富版式沉淀更專業(yè)众雷;
2、互聯(lián)網(wǎng)技術(shù)發(fā)展使得表現(xiàn)束縛越來越少敏晤,網(wǎng)頁設(shè)計(jì)可以有更多樣的空間搜变;
3、網(wǎng)頁設(shè)計(jì)和紙媒雜志有許多共通性瓶竭。
想想:質(zhì)感超輕薄督勺、版式強(qiáng)節(jié)奏、圖片大視覺
一斤贰、質(zhì)感輕薄智哀,雜志版式主要通過色塊、點(diǎn)荧恍、線瓷叫、面的配合形成形式美感屯吊。輕質(zhì)感減少了許多具體質(zhì)感和細(xì)節(jié)的繁瑣束縛,讓設(shè)計(jì)師容易面歲畫面進(jìn)行控制也加快了設(shè)計(jì)時(shí)間摹菠。
二盒卸、版式強(qiáng)節(jié)奏,在畫面中強(qiáng)調(diào)和突出重點(diǎn)信息次氨,并有明確的引導(dǎo)指示蔽介。不同于平鋪式的交互方式,更強(qiáng)調(diào)信息層級(jí)關(guān)系煮寡,和視覺流程虹蓄。
強(qiáng)節(jié)奏表現(xiàn)方法:1、大和小的節(jié)奏配合幸撕;2薇组、多和少的節(jié)奏配合;3坐儿、粗和細(xì)的配合体箕。
三、圖片大視覺挑童,讀圖時(shí)代累铅,長(zhǎng)篇文字讓人厭倦,圖片是直接有效的觸動(dòng)我們麻木神經(jīng)的好方法站叼。大視覺的表現(xiàn)手法:1娃兽、背景大圖;2尽楔、信息圖像化投储;3、文字配圖
七阔馋、全屏大視野
隨著顯示器的更新玛荞,網(wǎng)頁尺寸不再停留在800-1000像素,全屏畫幅和自適應(yīng)成為設(shè)計(jì)的關(guān)鍵呕寝。
說說:解決兩個(gè)問題勋眯,一個(gè)是解決全背景顯示產(chǎn)生的干擾問題;另一個(gè)是面對(duì)不同尺寸的顯示器如何解決自適應(yīng)的問題下梢。
想想:
1客蹋、大圖平鋪
2、中心定位兩側(cè)自適應(yīng)
3孽江、單側(cè)定位讶坯,中心延伸
4、小切糕全屏響應(yīng)
看看:硬件已邁入視覺無限制支持了岗屏,從720到1080辆琅,從標(biāo)準(zhǔn)高清到4K漱办,從4K到8K......
八、文字衣櫥
文字太多往往會(huì)影響設(shè)計(jì)美感婉烟,文字也是可以有秩序的進(jìn)行設(shè)計(jì)的娩井,如果沒有章法簡(jiǎn)單的把文案堆積,那就是失敗的設(shè)計(jì)隅很,給文字整理一個(gè)衣櫥撞牢,建立一套智慧的文字系統(tǒng)一定會(huì)讓設(shè)計(jì)更優(yōu)秀率碾。
說說:文字也要有個(gè)家叔营,思路清晰的文字排布會(huì)讓你的設(shè)計(jì)清新脫俗。
想想:大關(guān)系所宰、分要點(diǎn)绒尊、小字眼
文字衣櫥的元素:
主標(biāo)題:主標(biāo)題是指一篇文章的大標(biāo)題,用來提出文章中心或主旨,文字體量相對(duì)較少,在網(wǎng)頁表現(xiàn)中通常為粗磅大字號(hào)在整體的排版節(jié)奏中占據(jù)著較強(qiáng)的節(jié)奏。
副標(biāo)題:副標(biāo)題是指用來解釋主標(biāo)題的說明文字仔粥,跟在主標(biāo)題后婴谱,文字?jǐn)?shù)量相對(duì)主標(biāo)題更多一點(diǎn),設(shè)計(jì)表現(xiàn)為字號(hào)中等躯泰、磅數(shù)中等谭羔。
小標(biāo)題:小標(biāo)題通常指的是在具體內(nèi)容中,對(duì)詳細(xì)內(nèi)容進(jìn)行分類組織麦向,使行文條理清晰瘟裸,在長(zhǎng)篇文字中我們也可以對(duì)它進(jìn)行分類和邏輯梳理,在設(shè)計(jì)上诵竭,也可以通過特殊的形式表現(xiàn)進(jìn)行定位话告。小標(biāo)題的表現(xiàn)通常弱于主副標(biāo)題。
序號(hào):有順序的號(hào)碼卵慰,如數(shù)字序號(hào)1沙郭、2、3裳朋、4…包括大寫漢字病线,如一、二鲤嫡、三氧苍、四。
在設(shè)計(jì)中泛范,由于序號(hào)有著歸類指引的特殊功能让虐,所以在設(shè)計(jì)中通常是一個(gè)小亮點(diǎn),它的裝飾作用如同一個(gè)小圖標(biāo)對(duì)整體的文字信息可以起到分類罢荡、定位赡突、裝飾的作用对扶。如果放大序號(hào)的字號(hào),還可以加強(qiáng)排版的節(jié)奏感惭缰。
內(nèi)容說明:內(nèi)容說明指的是通常所說的正文浪南,它包含了下面要說的這些元素,但如果將整體文字信息進(jìn)行解剖的話漱受,也就沒有所謂的正文的概念络凿,正文是不同信息分類的綜合。所以這里將暫時(shí)無法歸類的昂羡、文字體量較多的信息叫內(nèi)容說明絮记,它的字號(hào)通常較小,字體設(shè)計(jì)簡(jiǎn)潔虐先。
提示說明:這個(gè)是在正文之外的對(duì)某個(gè)事件或名詞的解釋補(bǔ)充怨愤,在設(shè)計(jì)中通常的位置是在說明文字邊上或依附于說明的事件或名詞。有的還備有圖文手繪等進(jìn)行裝飾蛹批,或者是一些雖然沒有功能性卻讓整個(gè)頁面都生動(dòng)起來的小補(bǔ)充撰洗,這也是設(shè)計(jì)表現(xiàn)中的一個(gè)小亮點(diǎn)。
關(guān)鍵詞:關(guān)鍵詞通常是指正文中出現(xiàn)的重要數(shù)據(jù)腐芍、時(shí)間差导、地點(diǎn)、事件猪勇、物件等,設(shè)計(jì)中會(huì)通過標(biāo)紅设褐、放大、圖示等方式進(jìn)行強(qiáng)化埠对。如果某些關(guān)鍵詞的重要性高络断,而且在毎個(gè)分類選項(xiàng)中都會(huì)岀現(xiàn),也會(huì)對(duì)其進(jìn)行特殊的圖形化定位表現(xiàn)项玛。
圖示分為兩種:一種是對(duì)整體內(nèi)容的概括貌笨,叫圖標(biāo)也叫Co;一種是對(duì)單個(gè)物件名詞的圖形化表示襟沮,我們稱它為圖片高品質(zhì)的圖示對(duì)整體設(shè)計(jì)會(huì)起到比較大的幫助锥惋。另外瀏覽者通常會(huì)對(duì)帶有圖標(biāo)、圖片的信息特別關(guān)注开伏。
按鈕:按鈕有幾種作用一是觸發(fā)行動(dòng)膀跌,如“立刻購(gòu)買";二是跳轉(zhuǎn)到其他相關(guān)信息固灵,如“熱點(diǎn)推薦”三是對(duì)當(dāng)前內(nèi)容的補(bǔ)充說眀頁面捅伤,如”點(diǎn)擊查看詳情“、“更多“之類的按鈕巫玻。我們可以根據(jù)不同的按鈕功能設(shè)計(jì)其擺放的位置丛忆、顏色祠汇、大小等屬性。按鈕的設(shè)置也可以讓當(dāng)前信息呈現(xiàn)較重要的部分,讓信息呈現(xiàn)更好地收納熄诡。
大關(guān)系:大關(guān)系可以理解為對(duì)文章的大意進(jìn)行第一步分段可很,它是為了緩解大篇幅文字對(duì)閱讀造成的恐懼,從三個(gè)步驟對(duì)比來看凰浮,大關(guān)系是對(duì)第一層大邏輯的梳理我抠。它不涉及標(biāo)題、內(nèi)容或關(guān)鍵詞等細(xì)分袜茧,它的任務(wù)主要是理清段落之間的關(guān)系菜拓,比如它們是屬于并列關(guān)系還是流程關(guān)系,每段文字之間是否有相同的結(jié)構(gòu)或相似的數(shù)據(jù)信息等等惫周。
分要點(diǎn):在分清大關(guān)系之后尘惧,我們第一次通過圖形來進(jìn)一步標(biāo)識(shí)每個(gè)段落里的結(jié)構(gòu)康栈,提取毎個(gè)信息段落里的主要元素递递,包括標(biāo)題、副標(biāo)題啥么、小標(biāo)題登舞、內(nèi)容說明等。這樣的提取可以幫助用戶快速提煉段落大意在分要點(diǎn)的梳理過程中悬荣,我們要注意分清不同要點(diǎn)的層次關(guān)系菠秒,從大的主標(biāo)題到小的內(nèi)容說明,由重到輕氯迂,注意圖形和色彩的應(yīng)用践叠,把握節(jié)奏,不能混淆關(guān)系嚼蚀。
小字眼:小字眼禁灼,也可以叫做關(guān)鍵要點(diǎn),主要是由少量文字組成的一些相對(duì)重要的信息轿曙,比如數(shù)字弄捕、時(shí)間、地點(diǎn)导帝、獎(jiǎng)勵(lì)等等守谓。在這個(gè)環(huán)節(jié)我們通過圖形化標(biāo)識(shí)將這些信息進(jìn)一步突出。這些小字眼有些是關(guān)鍵信息您单,有些是數(shù)據(jù)對(duì)比類信息斋荞,通常我們會(huì)對(duì)其標(biāo)紅或安置在特殊的位置供用戶進(jìn)行類比預(yù)覽。有些關(guān)鍵信息我們會(huì)為它進(jìn)行配圖或增加有互動(dòng)行為的按鈕提示虐秦,從而使用戶可以更快注意并獲得這些重要的資訊平酿。
九讯檐、你看起來很好吃
你看起來很好吃?在這資訊爆炸的時(shí)代染服,如果說資訊是我們必須喂給用戶的食物别洪,那用戶往往會(huì)是一群偏食厭食的寶寶,如何讓他們樂意吞下這送到嘴邊的食物呢柳刮?好吃挖垛!好吃當(dāng)然受人喜歡,但真的好不好吃秉颗、有沒有營(yíng)養(yǎng)做為設(shè)計(jì)師的我們還真決定不了痢毒,不過“看起來很好吃“那便是我們的活兒了!
說說:信息的圖形化設(shè)計(jì)? ——? 這是一種對(duì)信息更深入理解的設(shè)計(jì)方法蚕甥,較之前提到的關(guān)于信息黃金排版哪替、信息文字收納等在邏輯上更進(jìn)一步,是通過設(shè)計(jì)師對(duì)信息的進(jìn)一步消化的圖形化輸出菇怀,也稱數(shù)據(jù)圖形化凭舶。近兩年在各類的數(shù)據(jù)報(bào)告表現(xiàn)中曰趨走翹。而我們也可以將其利用在日常的網(wǎng)頁中爱沟,使信息閱讀更加快捷有趣,看起來更好吃帅霜。
想想:并列型、對(duì)比型呼伸、流程型? ——? 先前我們提到了對(duì)信息的收納身冀,是對(duì)信息進(jìn)行歸類整理,在這一章里括享,我們來進(jìn)一步對(duì)它的邏輯進(jìn)行重組和圖形化搂根。重點(diǎn)在于剖析幾個(gè)事物之間的關(guān)系,并將這種關(guān)系用圖形的方式表現(xiàn)出來铃辖,在這里剩愧,我們簡(jiǎn)單將邏輯中最常見的三個(gè)類型進(jìn)行分析,它們是并列組合型澳叉、數(shù)據(jù)對(duì)比型隙咸、步驟流程型。
并列型:并列組合型,它可以是有共同邏輯關(guān)系的不同事物,也可以是同一事物的不同方面,在設(shè)計(jì)表現(xiàn)上,它們之間是種平等成洗、均衡的狀態(tài),而在這些內(nèi)容的表現(xiàn)形式和結(jié)構(gòu)上也是相對(duì)一致的五督。
對(duì)比型:對(duì)比關(guān)系是指兩個(gè)或兩個(gè)以上的事物之間的比較,或者是一個(gè)事物的幾個(gè)方面的比較。它是在并列關(guān)系基礎(chǔ)上強(qiáng)化特征,并通過數(shù)據(jù)或圖形進(jìn)行可視化的比對(duì)瓶殃。它是并列關(guān)系的升級(jí)和特征強(qiáng)化充包。對(duì)比關(guān)系區(qū)別于并列關(guān)系的特征在于,它的對(duì)比表現(xiàn)高于它的并列表現(xiàn),通常是需要經(jīng)過對(duì)比得出某結(jié)論而存在。從簡(jiǎn)單的二者對(duì)比到多個(gè)元素之間的對(duì)比,從并列的單一數(shù)字呈現(xiàn)到數(shù)據(jù)化的圖表,從橫軸的圖表到環(huán)形的圖表,對(duì)比型的樣式因?yàn)槠洳煌奶卣鞫鴵碛性S多豐富的表現(xiàn)形態(tài)。
對(duì)比型可細(xì)分為:
1基矮、兩個(gè)數(shù)據(jù)對(duì)比
2淆储、多個(gè)同類數(shù)據(jù)對(duì)比
3、標(biāo)明參數(shù)的同類數(shù)據(jù)對(duì)比
4家浇、同類數(shù)據(jù)的多層屬性的對(duì)比
5本砰、非同類數(shù)據(jù)的對(duì)比
6、單個(gè)數(shù)據(jù)的軸線圖
7钢悲、兩個(gè)數(shù)據(jù)的軸線圖
8点额、多個(gè)數(shù)據(jù)的軸線圖
9、環(huán)形對(duì)比數(shù)據(jù)圖表
10莺琳、環(huán)形組合對(duì)比數(shù)據(jù)圖表
流程型:流程也是在并列基礎(chǔ)上的升級(jí)还棱,它是指處于并列關(guān)系的兩個(gè)或兩以上的單位,它們之間具有前后的任務(wù)關(guān)系惭等,共同擁有一個(gè)目標(biāo)和方向并共同完一個(gè)完整行為珍手,這種關(guān)系稱之為流程關(guān)系。流程關(guān)系在商業(yè)運(yùn)作辞做、操作指導(dǎo)或是任務(wù)說明中也是很常見琳要。
流程型可細(xì)分為:
1、兩個(gè)任務(wù)的流程關(guān)系
2凭豪、多個(gè)任務(wù)的流程關(guān)系
3焙蹭、多個(gè)支線流程
4晒杈、循環(huán)流程
十嫂伞、釘釘鉚鉚
你是否曾面對(duì)著苦等到手的淘寶衣衣欲哭無淚?上身效果不佳拯钻,不是我們身材不好帖努,臉蛋不美而是我們少了它們!就是這些小小的裝飾將這件衣衣稱托出自己的韻味粪般。好花還需綠葉襯拼余,即使是釘釘鉚鉚也是同樣重要!
說說:網(wǎng)頁中的小裝飾? ——? 釘釘鉚鉚指的是網(wǎng)頁設(shè)計(jì)中的小裝飾,它并非主體的形式感或者大的UI亩歹,而是網(wǎng)頁設(shè)計(jì)中非主體的裝飾,比如一個(gè)小圖標(biāo)匙监、或者一些小修飾,正如服飾搭配中的一整套行頭,釘釘鉚鉚則是這套行頭中的小手飾、小鏈子等,這些看起來可有可無的小裝飾實(shí)實(shí)在在地襯托岀了主體的服飾的個(gè)性與味道小作。
想想:小圖標(biāo)亭姥、小序號(hào)、小字顾稀、小手繪? ——? 我們將網(wǎng)頁中的這些常用小裝飾整理成四個(gè)類別小圖標(biāo)达罗、小序號(hào)、小字静秆、小手繪,也許當(dāng)我們?yōu)g覽一個(gè)頁面時(shí)很難關(guān)注到它們,但這些小的裝飾點(diǎn)卻在視覺潛意識(shí)里為整體頁面的易用性粮揉、舒適性巡李、節(jié)奏感和親切度默默加分。
附錄A:一個(gè)商業(yè)設(shè)計(jì)師的職業(yè)世界觀 —— 關(guān)于商業(yè)視覺設(shè)計(jì)師的自我定位
一扶认、自我定位
1侨拦、我是誰?
第一階段藝術(shù)設(shè)計(jì)者辐宾;第二階段翻譯者阳谍;第三傳達(dá)者
2、他是誰螃概?
產(chǎn)品營(yíng)銷角度可劃分為:產(chǎn)品和市場(chǎng)兩個(gè)方向矫夯,產(chǎn)品經(jīng)理負(fù)責(zé)產(chǎn)品內(nèi)容的更新和推廣,市場(chǎng)經(jīng)理則從市場(chǎng)角度樹立產(chǎn)品的品牌形象吊洼,增加產(chǎn)品市場(chǎng)曝光率和產(chǎn)品的美譽(yù)度训貌。
從服務(wù)和技術(shù)支持的角度出發(fā)可分為:決策層、策劃層冒窍、實(shí)現(xiàn)層递沪。
3、我要做什么综液?
核心定位
a款慨、產(chǎn)品風(fēng)格設(shè)定
b、竟品市場(chǎng)差異化設(shè)定
c谬莹、產(chǎn)品logo設(shè)計(jì)
d檩奠、產(chǎn)品概念站設(shè)計(jì)
產(chǎn)品運(yùn)維
a、官網(wǎng)制作
b附帽、活動(dòng)專題
c埠戳、資源包
d、廣告平面海報(bào)設(shè)計(jì)
e蕉扮、各平臺(tái)媒體推廣視覺規(guī)范設(shè)定
市場(chǎng)推廣
a整胃、媒體平臺(tái)網(wǎng)站建設(shè)
b、合作活動(dòng)專題
c喳钟、展會(huì)場(chǎng)館的主KV設(shè)計(jì)
d屁使、周邊設(shè)計(jì)
二、產(chǎn)品相關(guān)
1奔则、產(chǎn)品特點(diǎn)及類別
2蛮寂、用戶畫像
3、產(chǎn)品周期:預(yù)熱期应狱、測(cè)試期共郭、運(yùn)營(yíng)期
4、網(wǎng)絡(luò)整合營(yíng)銷流程圖