設計四大基本原則

設計四大基本原則

本文為『the non-designer’s design book』一書(Robin Williams著)內容心得系列文章第一篇,這本書如它的書名一般,即使是沒受過正規設計教育的人也能學到正確的設計概念,本系列文章共有六篇,分別為 :

  • 設計四大基本原則
  • 設計第一原則:親密性
  • 設計第二原則:對齊
  • 設計第三原則:重複
  • 設計第四原則:對比
  • 設計四大基本原則總結

沒聽過所以你沒注意過

本書提到一個很重要的觀念,「一旦能夠說出什麼東西的名字,就會很容易注意到它的存在。你就會開始掌握它,擁有它,使它在你的控制中。」。當我們不曉得這些設計觀念的存在,我們也很難會注意到設計作品上問題、缺漏,更不可能做出良好的設計。

四大原則學習步驟

學習四大基本原則  >  認識到自己沒有運用到這些原則  >  應用基本原則

對比(Contrast)

對比的就是避免頁面上有太多相似的元素,透過對比讓最重要的內容能夠稱脫出來,吸引使用者的目光。對比可以使用字體、顏色、大小、線寬、形狀、空間等方式,對比能夠讓訊息更準確傳達、內容更容易被記住、內容更迅速尋找,是設計必備的技巧。

猶豫不絕,如果你想要讓對比效果明顯,就不要害怕,對必的差距要夠大:不要將黑色與咖啡色拿來做對比,這樣的對比力道完全不足。
太多對比,不要在一個頁面使用太多種字體,造成沒有主角的窘境。

重複(Repetition)

重複的目的就是「一致性」,讓設計中的視覺元素在整個設計中重複出現。重複這項技巧在設計上也十分常見,例如你會重複的使用相同顏色、形狀、材質、空間關系、線寬、字體、大小和圖片等。

太多的重複元素,這樣會讓原本想呈現的主體被埋沒,而且令人討厭。

對齊(Alignment)

任何東西都不能在頁面上隨便放置,每個元素都應該與頁面上的任何元素有某種視覺關係,讓設計能夠保持清晰、精巧,提昇整體的可讀性。

避免在一個頁面上混合使用多種對齊模式,也就是不要有一些置左,一些又置右。

盡量避免使用置中對齊,除非這是比較正式、穩重的設計。

親密性(Proximity)

彼此相關的項應當靠近,歸組在一起。如果多個項相互之間存在很近的親密性,它們就會成為一個視覺單元,而不是多個孤立的元素。這有助於組織信息,減少混亂,為使用者提供清晰的結構。

一個頁面有太多孤立的元素

不要在元素間留有相同的空白,除非這些元素互相之間是存在著關係的。

任何的設計理論都有一定的價值存在,Robin所提除的四大基本原則更是基礎中的基礎,雖然這四種元素都是極為簡單的觀念,我們卻時常沒去注意誤觸了許多設計上的陷阱。知易行難,在說明瞭解與實際操作的差距,如果連「知」都無法達到(瞭解),那根本無法做到「行」這點(實作),做任何東西皆如此,「無知難行」。

一天一篇,學習思考、分享

Images via wallbase CC License.

參考資料

the non-designer’s design book – Robin Williams著

簡單卻又不簡單

簡單卻又不簡單

簡單並不意味著欠缺或低劣,也不意味著不注重裝飾或完全赤裸。裝飾本身應該緊密接近設計本身,任何無關的要素都應該予以剔除。 – Paul Jacques Grillo 

簡單的設計在最近很熱門,很多的設計師最近都在討論,而且還出現了許多的設計法則,最有名的應該就是『設計減法法則』,我認為簡單的設計最大的價值在於它能讓產品最吸引人的特色完整清楚的表現出來。

別製造無用又複雜的產品

功能增加的越多,就越難發現真正對使用者有價值的新功能。盲目添加的新功能早晚會成為用不到的垃圾功能,每次所添加的功能都會造成整體產品維護的成本越來越高,面對多變市場的彈性也越會來越低,到最後使用者開始找不到你真正想提供的價值,讓他們感到不高興,自然市場就會離你而去。

簡單不是簡陋

簡單並無意味要最簡化,以腳踏車為例子,如果我們把腳踏車最到極簡化就會成為一部單輪車,如圖

單輪車

這輛車擁有腳塔車最核心的元素,可是說是一個簡單的設計,但是把你抓上去騎你會騎嗎?

一樣以單輪車為例子,獨輪車,如圖

獨輪車 

獨輪車是一個以人力推動的小型運載工具,最早或希臘人或漢朝人發明。它符合工效學,能夠抵受在崎嶇路面行進,但是不能在太過傾斜的地面作物資或工具運輸。這種車具有極佳的操控性,並能夠將承載物體的重量平均分佈在拉動者與車輪本身。

同樣是以單輪為設計核心,一個極其難用,一個極其有用,實用性天差地遠,這也顯示了好的設計是『簡單而不是簡陋』。

簡單卻又不簡單

簡單的設計看來簡單,其實非常的難。發想一個新功能也許不容易,但要抉擇刪除一個功能、隱藏元素卻比這難上許多,很多時候你無法得知刪除這個功能會帶來怎樣的影響,也許使用者會愛上你這個決定,相對的你也可能引來使用者的抱怨。

簡單設計的核心是為了讓使用者發現最核心、最重要、最有價值的部份,最重要的是讓他們使用最少的力氣就能完成目標。功能多不一定表示它是複雜、不好的,市場上還是有很多的all in one的產品備受喜愛。

一天一篇,學習思考、分享

Images via wallbase CC License.

參考資料

獨輪車

簡約至上

配色的含意

網頁常用配色

網頁常用配色

今天在UX Movement上看到一篇教你如何正確使用網站配色的文章,在這邊加上自己的經驗與大家分享。

為網站選擇配色是一個很重要的任務,要如何選擇一個正確的顏色是不容易的,網站的顏色選錯很有可能會惹惱你的使用者,因為他們會感到不適、盲目、不信任問題等等,身為設計師的你就必須要知道如何使用正確的顏色。 繼續閱讀

動手執行想法(idea)前請先手繪 (sketch)

Why It's Important to Sketch Before You Wireframe

Why It’s Important to Sketch Before You Wireframe

當心中突然出現一個很棒的idea時你會怎麼做? 我自己的習慣是馬上拿起紙與筆(或是mobile app)迅速的紀錄下來,紀錄對這個idea的想法並勾勒出草圖,今天在UX Movement上看到一篇十分精彩的文章 『Why It’s Important to Sketch Before You Wireframe?』,敘述使用手繪(sketch)勾勒Idea的好處,本篇文章介紹這篇文章所詮釋的概念並加上自己的想法與大家分享. 繼續閱讀