<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          注意頁面中看不到的那些東西:留白空間和圖底關系

          藍藍設計的小編

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里 

          如果你見過平面設計在畫布上繪制圖形的過程,那么你緊緊是見到你工作的一部分內容。畫布上的負空間和我們在畫布上繪制元素的正形空間同樣重要。

          設計就是處理形狀和空間兩者之間關系。為了更有效的利用空間,首先你必須意識到它,并且學會看它。就是學會如何看空間中的圖形,空間的形式和空間與空間之間是如何交流的。這是初學者要學習和了解的系列設計原則的第二部分。第一部分就是之前介紹的格式塔,而剩下的文章(包括這篇)都是在格式塔原則的基礎上構建的,并且表明我們設計工作中用到的所有基礎原則都是有來源的。


          圖底關系原則

          格式塔原則在空間中用得最多的就是圖底關系。你設計中的所有元素都會被看作是一個圖形或者是另一個背景,并且它們之間的關系實現互排斥的。兩者都不會被感知的,除了涉及到另一個,并且只改變其中一個不改變另一個也是不可能的。圖底關系也是互補的。圖形和背景的關系可能對比強烈或是對比減弱,并且在組織這兩個彼此之間的關系是設計重要的方面之一。因此設立了這么一個情景,——如何溝通你的設計和如何解讀你的設計。


          “白色空間被認為是一個活躍的元素,而不是一個被動呆板的背景”——Jan Tschichold

          圖中(從左到右):

          圖1 :等距的黑色線創建了一個灰色區域。圖和背景的關系是穩定的。

          圖2 : 去掉空間后,圖形占主導地位,并且我們看到了一個實心的黑色的區域。

          圖3 : 兩行黑色的線被去掉后,空間變得活躍了,并且似乎位于灰色區域之上。

          小編語:圖片來源Alex White寫的《The Elements of Graphic Design》這本書中,亞馬遜有賣,大家可以購買


          考慮上面圖片中的三段話。左邊的,我們看到一組黑色的線,在黑色線中間是等距的白色空間。黑色線條和白色空間一起形成了一個灰色區域,每一個都對結果有影響。刪除白色空間,正如第二個圖一樣,完全改變了區域樣子,它變成了一塊純黑色的圖形。不僅空間消失了,而且可視的獨特的多元素變成了一個單一的元素。第三個圖形,去掉了兩行黑色線。這一行為激活了這個空間,使它看上去好像在灰色區域的上面。背景變成了圖形并且添加了更深入的設計,豐富了設計效果。

          穩定的,可逆轉的,和模棱兩可的圖底關系


          有三種類型的圖底關系:

          1穩定形(上面左圖示例)

          什么是圖和什么是底的關系很清晰。它們其中一個會作為主導成分。


          2可逆性(上圖中間的圖片)

          這兩個圖和底關系是一樣的,同樣吸引觀眾的注意力。這就創造了張力,它們中的任何一個都可以壓倒對方,從而產生動力設計。


          3模棱兩可曖昧的關系(上圖中最右邊的)

          元素可以同時是圖和底。它們形成同樣有趣的圖形,和觀眾在這個構成作品中會找到他們自己的切入點。

          這取決于你設置的關系和你怎樣去平衡圖和底二者的關系,你導向觀眾來看設計的不同部分,并且解釋在不同環境下他們看到了什么。



          圖和底并不是唯一一個格式塔原則在空間中扮演的重要角色,還有兩個分別是:

          接近原則(proximity)

          接近原則是使用空間來連接元素和通過空間中閉合一些元素來分離元素。我們可能會想到的例子是頁面上的文本段落。 段落與段落之間的空間大于一個段落中文本的行間距。

          閉合原則(closure)

          閉合原則是利用元素之間的間隙空間。觀眾用自己的信息來填補空白從而完成一個整體的部分。

          大量的留空間和留空間太少都是閉合原則的忌諱。只有已有的空間和需要被填充的空間之間保持正確的平衡關系,才會使空間靈活并且產生閉合原則。

          閉合原則


          作為一個設計的元素——空間

          考慮一下音樂。如果音樂中的每個音符和和弦同時出現,音樂就不會產生。你有的只是噪音。音樂是在聲音和安靜對比中產生的。不同的聲音和靜音創造出了節奏韻律和歌曲。沒有安靜就沒有音樂。

          空間在視覺上執行者同樣的功能。它給元素提供呼吸的空間。通過設計它讓眼睛自由移動,并且來發現它要找的元素。正形和負形形成對比。沒有空間,就沒有設計。你的視覺就會混亂。(也就是我們通常說的留白。)

          除非噪音是你想在空間中試著用來交流的。與空間太小相比,人們不可能抱怨空間太多。


          空間中可以做到以下幾點:

          建立對比,重點和層次;

          形成戲劇性和視覺張力;

          (小編語:大家可以看些平面設計中視覺張力,和利用留白增強海報設計的視覺張力)

          在元素與元素之間提供視覺休息的空間。


          只有一些東西出現在你的空間中時,圖底關系才會蘊含其中。在加入正形和空間是沒有定義的。圖底關系是必須建立在之前的空間的中間,是存在的并且在開始就是可交流的。一個更重要的空間功能是提高可讀性和易讀性。宏觀的空間使文字更引人注目,微觀的空間使文字更清晰易讀。

          微空間

          這是指在一組中元素的空間。是字母之間,單詞之間和段落之間的空間。


          宏觀的空間

          這是主要元素之間的空間。它區分元素或者是元素組和提供眼睛跟隨的的路徑和元素之間休息的地方。

          空間與品質相關。更多的空間需要更少的元素或極少的元素。比較一下高端店鋪和折扣零售店。在商店里面哪一個有更多空間,哪一個利用空間中的每一個角落來包裝產品?空間要傳達給你的是什么?


          空間還可以傳達出除了品質以外的屬性,例如:

          精致高雅

          簡單

          奢華

          干凈

          孤獨

          開放,開闊

          你在設計時沒能考慮它,你就是在浪費空間。你可以通過溢滿的方式浪費空間。你可以通過阻斷它內在元素的設計和不允許它在設計中連接另一個空間的方式來浪費空間。

          設計最終是形狀的排列,這包括所形成的空間形式。不要害怕使用空間。把它看作是你操控下的一個重要的設計元素。


          在網站中有關空間的一些例子

          為了更好地利用空間,你首先需要自覺的意識到這一點。學會識別在不同設計中的空間。請注意,它形成的形狀,考慮什么是空間要傳達的。最后,我來看看一些網站的設計,并且注意怎樣使用空間(留白)。


          保守派

          Tom Johnson的保守派設計使用了大量的留白,給文字和其他元素之間以呼吸。對于什么是圖和什么是底沒有混淆誤解。

          信息包含由空格分隔(記得就近原則),區分元素組。你可以很容易地區分一個帖子的結束和下一個的開始,僅僅是通過它們之間的空間。

          頁面上的主要內容是稍微偏離中心的,也就是一邊會有更大的空間。這個空間偶爾被元素打斷,激活了空間和被打斷的元素。這有助于吸引注意力到這個區域,特別是這個區域的內在元素。


          HEROKU的狀態頁面

          下圖展示了Heroku的部分狀態頁面作為主要空間。在特別好的一天我碰巧看到了這個網站,因為附加的正面元素意味著更多的事件在這個平臺上報道。在這里,更多白色空間意味著更好的服務。

          注意空白空間并不需要總是白色的。當頁面大量的留白時,你不可能抱怨說空間太多了。只有重要的信息在這種情況下,狀態更新和事件報告——打斷空間。


          小說簡介

          在小說簡介的頂部空間是不對稱的和靈活的。注意左邊的大塊空間直接導致讓你的眼睛注意到內容上。如果你點擊網站鏈接,并從頂部向下滾動網頁,你會看到空間用來分離和組塊的信息。

          分割線也用來組合和分離這些塊。當瀏覽網站,注意到并不總是碰這些行,允許空間流動在它們周圍,并且鏈接到另一個空間。這可以防止該空間受限制。


          ELLIOT JAY STOCKS(這是個設計師)

          Elliot Jay Stocks的網站為我們所熟知,這個就是他背后設計作品之一。在Elliot的網站上不對稱的空間設計再次起到了活躍空間的作用。

          在此頁面頂部的大圖片可能作為臨時塊用于訪問下面的內容; 然而,在圖片旁邊大量的空間提供豐富和引人注目的地方讓眼睛在他周圍移動。如果在左邊的側欄有相同的背景顏色作為主要內容,那么它可能會更容易讓眼睛移動到圖片周圍,但顏色的變化很那很難。

          正如上面的網站,空間用來包圍和區分信息明確的組,讓每組都凸顯出來,并且讓眼睛找到它們想要的和在內容之間能夠停留休息。


          PHIL COFFMAN(這也是一位設計師)

          Phil Coffman的網站內容形式是單一的形狀 ,位于大部分都是空的空間中。缺乏許多正面的元素來增加那些已經存在的元素的重要性。

          實際上在有顏色矩形的背景中,文本周圍有足夠的空間可以容易閱讀,而不是誤認為在這個頁面上其它類別的文本。

          正形(空間的形狀)響應調整到不同的瀏覽器的寬度,但是一個單一的大的形狀這種模式周圍被剩下的空間包圍。

          網頁設計的新冒險

          像這里的許多網站,該網站2013年的網頁設計的新冒險大會中在元素周圍留了大量的的空間。不同信息組之間被空間包圍,并且空間讓整個設計都活躍了起來。

          有趣的地方要注意的是在左上角圖片右邊主要內容之間的灰色圓形箭頭。這個箭頭阻斷了空間的流動?因為它們不碰及和因為每個虛線的地方中斷了空間,空間可以通過虛線的縫隙流動,盡管它的流動明顯受到了限制。淺灰的顏色是有用的。它阻止了箭頭成為主導,且不難想象空間流過這些線。

          憑心而論,如果我的瀏覽器更寬當我在屏幕截圖時,箭頭不會與主要內容重疊。然而,在1280像素下他們把這個設計變成了單行索引??偟膩碚f,這就是它的工作原理,盡管我好奇如果沒有剪頭的存在,空間流動會不會更好。


          一些logo設計的例子

          我會留些logo設計的空間組合,作為設計中必不可少的一部分。不是指出每個使用的空間,而是我會做一些普通的評論,且然后讓你們自己探索空間。

          注意下面的logo怎樣使用圖底關系。在一些中,直到你看到圖和底兩者,你看不到一個完整的logo。對于所要傳達什么內容兩者都是必要的貢獻者。

          這些logo中有幾個是依賴于閉合原則。意味著你看到的并不是真正的存在,盡管如此但你還是看看吧。一些 logo也在玩弄圖底關系。什么是圖,當你在看整個 logo時,相反它的背景變成了底,在里面成了一個更小的圖。這種可逆性圖底關系是要傳達什么樣內容的核心。

          各種標志,以充分的利用留白。

          云床

          黑貓休息室

          移動

          海豚和海豹標志設計

          種植牙指南

          Wineforest


          總結

          我希望你從這篇文章中能明白并掌握兩件事。首先是設計中使用的留白和格式塔原則圖底關系之間的聯系。格式塔原則之下許多都是我們設計師要做的事。

          第二,也許更為重要的是,作出努力,花些時間觀察在設計中怎樣使用空間,也就是所謂的留白。不要讓空間成為你正面元素的附屬產品。盡可能的了解學習設計空間,不亞于主要元素的設計學習。任何頁面的布局基本上都是空間的排布。

          有意識的分析空間,且故意使用它來創造一個更好的設計。不要讓它成為遺留下來內容。把它看作是一個必要的設計元素,作為你圖形的設計元素。在下次的文章中,我會添加更多格式塔原則來混合和完形原則,探索焦點,延續和共同命運給我們帶來思想如視覺重量和構成的平衡。


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務 

           

          【DDC譯文】設計思維 101

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          來源:UI中國

          Image title

          注:“101”原為美國大學課程第一章或導論部分的標注,現引申為某種學科/知識的入門性介紹。




          設計思維發展史


          很多人都有一個誤解,認為設計思維才剛剛興起。實際上,人們對設計思維的運用已有年頭:紀念碑、橋梁、汽車、地鐵系統等都是其產物。縱觀歷史,優秀的設計師早通過以人為本(human-centric)的創造性設計過程來締造寓意深刻、富有感染力的設計方案。

          設計溝通的七條經驗

          藍藍設計的小編

          實際工作中,我們每天也花大量時間在開各種會,各種討論上。溝通的效率和效果都直接影響著最后產出的質量。但在我們看最終的工作結果的時候,溝通作為過程反而不那么直觀,很難去評價和衡量。我試著列舉設計溝通中容易犯的一些錯誤,并總結了7條經驗,希望對同樣在思考這些問題的同學有些幫助。下文主要拿產品經理和設計師之間的矛盾沖突來舉例。


          1. 避免雞同鴨講


          雙方都在說自己的道理,卻不聽對方是怎么講的;或者因為溝通雙方無法說出真實的想法,導致溝通停留在表面上無法深入。這兩種情況下,溝通效率都很低,而且很難達成共識得到結果。


          比如我有一次看到,產品經理在和設計師爭執,一個在講運營的事情,一個在講設計規范的事情,都在嘗試著告訴對方,從自己的專業角度來看,這個事情應該怎么做。討論幾乎無法進行下去,因為誰也不肯讓步。這種溝通效率是很低的,雙方壓根就沒有站在同一個層面講問題,設計師不懂運營,產品經理不懂設計。


          這種情況在新人身上更常見,因為新人剛進入工作崗位,只了解自己的專業和工作內容,還不太理解別的團隊中其他成員的目標和立場,很容易出現雞同鴨講的情況。當發現自己和對方講的不是一個層面的東西時,及時找有經驗的同事來幫助溝通會是行之有效的辦法。


          另一種情況也很常見,就是溝通的其中一方不愿意或者不知道怎么說出自己真實的想法。如一個產品經理一定要設計師改一個東西,設計師怎么解釋也沒用,請來了有經驗的同事看,也覺得這里其實不用改。溝通到最后才發現,原來是產品的老大說要這么改,產品經理在老大面前答應了要改,所以就跑來設計師這里軟磨硬泡。產品經理如果可以從一開始就告訴設計師,這個需求是來自某某,我堅持是因為我答應某某說肯定可以改掉的,整個溝通就不需要耗這么久了,因為只要把這個某某也卷入一起討論就可以搞定了。


          設計師需要掌握更多跨專業知識,理解不同職位的立場;學會講自己內心真實的想法,挖掘對方的表述背后真實的含義。只有當設計在同一層面上時,才能做更有效率的溝通。

          表單設計的視覺要素分析

          用心設計

          一個好的表單界面設計,應沒有一個多余的視覺要素


          表單設計的視覺要素分析

          Image title

          復雜任務引導設計——阿里云國際站上云鏈路設計探索

          用心設計

                               如何引導用戶行為


          首先我們來看如何引導、改變用戶的行為。斯坦福大學學者B.J.FOGG曾提出FOGG行為模式理論,他認為一個行為包含以下三個維度:“動機,能力和觸發點”。為了實施某個行為,個體必須同時具備足夠的動機、實施這個行為的能力和實施這個行為的吸引因素。

          設計理念比美感更重要

          用心設計

                            設計理念比美感更重要。通過7大設計理念,來展示其重要性。

          Image title

          打造屬于你自己的微信表情

          用心設計


          關于微信表情制作的一些經驗分享

          Image title

          這9家企業,讓你真正看懂家居O2O

          藍藍設計的小編

          市場規模龐大的個性化定制

          成品家具行業跟服裝行業極其相似,都是高庫存行業。企業往往根據之前的銷售業績和對未來的消費趨勢預判來組織供應鏈先進行產品生產,這使得企業需要承擔巨大的采購、倉儲、庫存等成本。市場環境一旦變差,這種模式的盲目性就顯露無疑。而定制家具的模式由于其標準化的服務,通過在供應鏈的制造、分銷、傳播等各環節,實現消費者個性化需求滿足和規?;a,卻可以一定程度上很好的解決這種困境。這里例舉三家有代表性的定制家具企業,供大家參考。美樂樂因為可以實現規?;呐可a,所以也被歸屬到這一類里面。


          怎么做一個好的網站欄目策劃?

          藍藍設計的小編

          很翔實的如何進行網站策劃教程,想做一個像樣兒網站的朋友值得一看。另外推薦一本書《用戶體驗的要素》,網站策劃必讀。

          一,首先需要明白的是:網站設計與網站策劃的區別。

          1.做策劃,不再是只關注表現,復雜的項目還可關系到運營、營銷,除了研究網站是不是“漂亮 ”,還需要關注網站的商務模式、推廣等。所以,做策劃比設計要費心得多,需要你有大局觀,把評價一個產品好不好的標準從“好看不好看”擴大到“好用不好用 ”、“有沒有市場價值”、“用戶喜歡不喜歡”等問題上。

          2.策劃工作周期長,也許很長時間方能夠見成效。設計得美不美,設計完了品評一下,就能夠心里有數;策劃做的好不好,要在項目運營一個周期后才能夠見分曉。如果策劃有問題,代價也是比較大的。

          3.意味著承擔更多壓力。很多公司,策劃是項目經理在做,有時,雖然策劃人員不是管理者,可是自然而然在和程序員、設計師溝通時成為了一個管理者的角色。他需要同時和美術設計師、客戶、老板、開發人員協調溝通。有時還需要掌握項目開發進度。—— 因此策劃人員也很容易成為管理者。管理意味著更大的壓力與責任。

          “做策劃怎么開始下手?”


          走心的技巧!為色盲用戶提升網頁可用性的實用設計技巧

          用心設計


          Colour Blind Awareness 的數據,4.5% 的用戶是色盲,如果你的網站受眾是以男性為主,那么這個數據可能高達8%。在進行網頁和UI設計的過程中,色盲人群的實際狀況很容易被設計師所忽略,畢竟絕大多數的設計師本身并非色盲。所以,應當如何在設計上兼顧到色盲以及色弱的用戶群體呢?

          今天的文章在之前的基礎上,總結出了13條實用可行的建議,提升色盲用戶的瀏覽體驗。當然,這樣的設計對于普通用戶而言,同樣非常有效果。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合