《形式感+》這本書應該是15年還是16年買的了,一直被閑置它碎,心態(tài)很浮躁不想看電子設備就找出來看了函荣。看書之前扳肛,特意翻了一下印刷時間是2014年傻挂,四年多時間,互聯(lián)網(wǎng)發(fā)展真的很快挖息,案例風格可以很明顯的感覺到“過時”金拒,不過不太重要,書里還是有很多值得學習的套腹。其實我自己是很少花錢去買這一類型的書了绪抛,因為在現(xiàn)在各種設計網(wǎng)站里其實都能找到大量類似的案例分析。
我自己工作內(nèi)容主要是UI設計电禀,更多接觸到的產(chǎn)品是to B系列的幢码,在這本書里作者在“做做”中提到的一些案例更多是關于游戲內(nèi)容的網(wǎng)頁設計,這是我沒有去了解過的一個方向尖飞,和我開始以為的是一些企業(yè)商戶網(wǎng)站或者電商設計稍稍偏差症副。
01 抄現(xiàn)實 (聯(lián)想)
利用現(xiàn)實物件為原型裝載網(wǎng)頁的信息內(nèi)容
這本書第一章里提到的抄現(xiàn)實,在我的理解里就是“聯(lián)想”政基。通過具象或抽象的聯(lián)想方式對網(wǎng)頁進行設計贞铣。書中有提到一個例子,就是關于棒球比賽的網(wǎng)頁設計沮明,首先根據(jù)主題聯(lián)想棒球或者球場作為一個整體網(wǎng)頁設計的視覺呈現(xiàn)辕坝,然后通過減法、分塊珊擂、加法三個步驟去完成設計圣勒。
1.減法: 在保留物體原有形態(tài)的基礎上刪減掉多余的型或線條费变,留出空間去承載更多的信息內(nèi)容。
2.分塊: 對需求主題所需要展示的信息進行整理圣贸,合理進行分配挚歧。(解決功能性問題)
3.加法:對網(wǎng)頁進行填充和裝飾。
02 圓吁峻、方滑负、三角(基本形狀)
圓、方用含、三角是設計中的基本形矮慕,在設計中,大多數(shù)的物體都可以由這三種形狀合并啄骇、交集痴鳄、排除而成。在本章節(jié)中提到的方法中缸夹,和第一章的提到的觀點有一定的重合痪寻,首先是根據(jù)需求或主題進行聯(lián)想,然后用基本型去構成物體虽惭,在這一步可能需要感性和理性的常識去構成一個識別度不錯的基本型橡类,然后就是第一章提到的“分塊”,對內(nèi)容進行布局調(diào)整芽唇,最后對整個畫面做“加法“顾画,進行顏色、形態(tài)的細化匆笤,一定程度填充畫面使畫面更豐富不單一研侣。
03 斷臂之美(局部的處理)
本章提到的斷臂之美是一種設計技巧,對局部的處理疚膊。其中包括去掉局部义辕、選取局部和替換局部三種方法。去掉局部是在原先的基礎上刪掉內(nèi)容的一部分寓盗,排除了視覺干擾使中心更加明確灌砖,選取局部是為了更突出主體以小見大,替換局部是用更能表現(xiàn)主體的事物來代替局部傀蚌,這三個方法都是使主體更加明確基显,在設計過程中根據(jù)實際需求選取更合適的方案。
04 欲擒故縱(對比)
在設計方法想要突出某個主體善炫,可以采用對重點做加法或?qū)ζ渌糠肿鰷p法撩幽,從顏色、明度、飽和度窜醉、大小宪萄、形狀等方面進行改變達到突出主體或弱化不必要項。同時提到攝影方法畫面里的滿和空榨惰,一定的留白更能突出主體拜英。
05 乾坤大挪移(旋轉&平移)
旋轉和平移是改變視覺的有效辦法,打破傳統(tǒng)的視覺習慣吸引注意力琅催。旋轉提到了整體旋轉居凶、背景旋轉、綜合旋轉三種方法藤抡,旋轉打破原有畫面橫屏豎直的呆板侠碧,讓畫面更輕松活躍。一些斜線條也可以產(chǎn)生運動感和速度感缠黍,衍生出時尚弄兜、年輕的表達。平移提到了上下格局嫁佳、左右格局挨队、混合格局三種方法,是指將原來的網(wǎng)頁進行左右平行移動蒿往,打破頁面的穩(wěn)定,找尋更多創(chuàng)意的呈現(xiàn)湿弦。
06 雜志版式
質(zhì)感輕薄瓤漏、版式強節(jié)奏、圖片大視覺是雜志版式的特點颊埃。
1.質(zhì)感輕笔叱洹:雜志版式主要是通過色塊和點、線班利、面配合形式美感饥漫。圓形、三角罗标、斜線庸队、1px細線、虛線闯割、箭頭都是經(jīng)常出現(xiàn)的元素彻消。
2.版式強節(jié)奏:1)大小:夸張的大字和小字配合使用宙拉。2)多少:留白和畫面的充實宾尚。3)粗細:字重。
3.圖片大視覺:1)背景大圖谢澈。2)信息圖形化大圖煌贴。3)文字配圖御板。
07 全屏大視野
面對不同顯示器如何進行自適應響應。
1.大圖平鋪:大圖平鋪自適應牛郑,圖片根據(jù)屏寬大小自適應稳吮。
2.中心定位,兩側自適應:不要將核心內(nèi)容放在兩側井濒。
3.單側定位灶似,中心延展:常見的左側一欄固定。
4.全屏響應:瀑布流設計瑞你,柵格酪惭。
08 文字衣櫥(信息的主次)
對文字信息的主次進行分類可以讓界面信息更清晰,用戶更易讀者甲。主標題春感、副標題、小標題虏缸、序號鲫懒、內(nèi)容說明、提示說明刽辙、關鍵詞窥岩、圖示、按鈕宰缤,這是大量文字內(nèi)容中的組成元素颂翼,我們要做的就是從文字中去提取信息分類。
09 你看起來很好吃(并列慨灭、對比朦乏、流程)
這一章的內(nèi)容是對信息更深入理解消化后的設計方法,平日里工作會有大量的邏輯關系考慮氧骤,所以這一章內(nèi)容對我還是有一些幫助和思考,在對比型的例子中展示了不同的對比方式筹陵,軸線圖刽锤、環(huán)形對比圖、豎狀圖等等惶翻,其實平日里工作中每天都會接觸到很多信息姑蓝,但是自己在思考范圍內(nèi)并沒有把圖像信息化這個塊常常考慮到吕粗,所以讀到這一章的時候纺荧,突然有被點醒。
1.并列型:有共同邏輯關系的不同事物或同一事物的不同方面。
2.對比型:兩個及以上的事物進行比較或一個事物的幾方面比較宙暇。
3.流程型:兩個及以上的流程關系输枯,多支線流程或循環(huán)流程。
10 釘釘鉚鉚(修飾)
給網(wǎng)頁中添加一些小修飾占贫,圖標桃熄、序號、小字或者手繪可以給整體頁面的易用性型奥、舒適性等加分瞳收。
1.圖標:1)方便瀏覽? 2)簡化文字說明? 3)增加版面節(jié)奏。
2.序號:1)閱讀順序引導? 2)快速閱讀? 3)增強節(jié)奏感? 4)圖片裝飾厢汹。
3.字:1)增強節(jié)奏感? 2)增強視覺精度? 3)空位補形? 4)文意補充螟深。
4.手繪:1)文字手繪? 2)人物手繪? 3)裝飾對話手繪? 4)內(nèi)容標識手繪。
附錄(略)
以上就是這本書整理出來的重要內(nèi)容烫葬,做整理是不想讓自己每次讀完一本書就忘記書里一大半的內(nèi)容界弧,也方便日后回顧可以快速抓住重點,上面的內(nèi)容只是提取出來的文字信息搭综,想要更好的理解當然還是要結合到書中舉出的大量例子垢箕。
一個吐槽:這本書的字體識別真的很費勁,尤其在案例需求的紅底白字兑巾,完全不想看下去~