簡練至上的Web計劃:創意要素及計劃技能

我的營銷“孕程”之 “十月媽咪”
2016-05-13
收集營銷大條件之下收集推行的用武之地
2016-05-13
Show all

簡練至上的Web計劃:創意要素及計劃技能

簡練,沒有即是簡略。這與撫琴是一個事理,你大概有才能彈得很快,但你其實不須要在全部處所都彈得這麼快。在許多時刻,讓速率慢下來反而比彈得緩慢要來的加倍艱苦。現實上,滋味每每最能表現在自在天然、舒緩平庸的韻律傍邊。接下來進入原文作者品德;我發明本身在很大水平上就是一Dummy System來著。

  簡練的Web頁面計劃作風是當前圈子傍邊的風潮之一。在本文中,我們起首將對這類作風傍邊的那些最具代表性的構成要素舉行剖析,隨後,我(英文原文作者)還會向列位分享一些事情中的實戰技能。

  簡練作風的創意構成要素

  牢固寬度的頁面結構構造

  花時光不雅察一些簡練作風的網站,你會發明它們傍邊的絕大多半都有效到經由優越計劃的網格結構體系。假如哪位同夥對網格結構還沒有大懂得的話,能夠假想一下,在動手舉行現實的視覺計劃事情之前,應用幫助線將頁面分別為多少等寬的列,經由過程這類方法對頁面構造及元素的結構舉行更精準的計劃。網格結構可使計劃計劃傍邊的信息構造加倍清楚,在視覺上具有猛烈的節拍感與同等性。

  牢固寬度的網格結構構造能夠為頁面帶來次序與效力。舉個例子,固然Creative Review傍邊的頁面結構會依據內容范例的分歧而有所差別,但我們可以或許感觸感染到的閱讀體驗倒是相稱聯貫的,由於這些頁面都是基於統一套網格結構框架舉行計劃的。下圖展現瞭他傢的首頁和About頁面:

對付在線雜志或報紙一類須要出現大批內容的網站來講,要打造簡練的頁面計劃計劃則加倍艱苦。不外英國的衛報(The Guardian)和一些同范例的在線報紙站點卻是向我們展現瞭經由過程牢固寬度的網格結構完成簡練計劃計劃的可行性:

  配色有些許橫暴麼譯者C7210註。

  假如沒有應用牢固寬度的結構方法來構造這些內容,險些能夠說,首頁將會亂的烏煙瘴氣。但是,在網格結構的贊助下,模塊之間的留白及條理幹系都相稱清楚,全部內容構造的硬朗性獲得瞭晉升。

  上面兩篇文章(英文)能夠贊助你更好的懂得與理論網格結構的觀點:

  A Brief Look at Grid-Based Layouts in Web Design

  The 960 Grid System Made Easy

  也沒有是甚麼新觀點瞭,國產好文章也蠻多,有欲求的同窗可自行尋食譯者C7210註。

  優越的筆墨付梓

  優越的筆墨付梓計劃每每能夠對簡練作風的頁面計劃起到事半功倍的推動感化。

  對字體數目的限定是這個中的一個癥結身分。假如在統一套計劃計劃傍邊應用瞭過量的字體,它們相互之間就會發生視覺上的合作與辯論,這無疑會使頁面變得紛亂不勝,用戶的瀏覽聯貫性也會遭到極大的損壞。

  看看那些計劃優良的網站,你會發明它們平日隻會用到一到兩種字體,並在此基本上經由過程分歧的字號、字色、粗細、間距等屬性來表現出內容的條理構造。

  在這方面,紐約時報(The New York Times)與The Mavenist都是沒有錯的例子。

  這兩個站點用到的字體都沒有跨越兩種,但它們的計劃計劃都比擬充足天時用瞭字體各方面的屬性特質,使得全部頁面傍邊的信息條理異常光鮮。

  除字體之外,行間距(line-height)也是筆墨付梓計劃傍邊的一個癥結性身分。使行與行之間堅持充足的空間,筆墨段落就可以變得加倍易讀,當用戶瀏覽到一行筆墨的末端時,也能夠很輕松的將眼光轉向下一行開首的地位。我們能夠在款式表傍邊經由過程line-height屬性對行間距舉行調劑。

  別的,對付每行傍邊的筆墨來講,字間距(letter-spacing)也是我們須要斟酌到的細節題目。公道的字間距能夠為筆墨帶來更好的呼吸感。

  關於筆墨付梓,也有些沒有錯的文章(英文)推舉一看:

  A Basic Look at Typography in Web Design

  CSS Typography: The Basics

  CSS Typography: Techniques and Best Practices

  CSS Typography: Examples and Tools

  簡化的配色計劃

  在印刷范疇,計劃計劃所用到的色彩數目平日會遭到各類實際題目的限定,比方項目標預算隻許可計劃師應用兩種色彩來計劃海報。相似如許的情形是很常見的,計劃師們經常會由於這些范圍而覺得相稱的鬧沒有住。

  而Web計劃范疇傍邊卻沒有存在這類題目,現在,多半表現裝備所支撐的色彩數目都宏大的沒有亦樂乎。從技巧上講,我們能夠為所欲為地打造各類花貍狐哨花團錦簇的計劃計劃,但是如許的理論方法明顯會與簡練至上的計劃目的南轅北轍。許多典范的案例傍邊隻會用到兩種色彩, 即某個明度的灰色外加一種有彩色。個中的有彩色會用在最為癥結的頁面元素上,比方主要的鏈接或頁頭傍邊的交互工具。從某種角度來講這類極簡的配色計劃具有一舉兩得的感化,一方面,它無疑會對簡練視覺作風的構建起到相當主要的感化,同時,這類計劃還能有用的進步頁面元素之間的比較度,使那些主要元素獲得最大水平的凸起。

  AisleOne的配色計劃稱得上是這方面的范例:

  Fuzzco則更加極度的隻用到一種色彩:

  好麼?我小我持保存看法譯者C7210註。

別的一些勝利的簡練計劃計劃傍邊,固然用到的色彩數目會跨越兩種,但團體的配色作風依舊趨勢於守舊,並且用到的色彩多半是比擬中性的。我們來看看Solo:

  正如筆墨付梓方法與信息轉達後果之間的聯系關系感化,配色一樣不但是拔取一些悅目的色彩那末簡略,優良的配色計劃能夠經由過程準確的視覺基調將網站傍邊的內容加倍有用地出現出來。以Notologist為例,通亮、互補的色彩搭配使得內容信息及它們之間的聯系關系獲得瞭異常天然的表現,頁面團體作風異常簡練直白,同時又沒有掉活氣。

  但我沒有愛好這個頁面中的玄色導航譯者C7210註。

  同等的圖片款式

  假如統一個網站傍邊的圖片(照片、插畫、圖表等)款式差異很大,你會認為焦炙麼?橫豎我會。

  對付內容傍邊有大概包括許多圖片的網站或頁面來講,要落實簡練至上的計劃思緒,個中最癥結的一點就是要經由過程協調同一的款式作風將這些視覺元素出現出來。

  舉例來講,IBM的智能星球活動(Smarter Planet campaign)觸及到多個方面的主題,與其相幹的印刷品、插畫、圖表、人機互動素材等都服從著統一套計劃尺度,包含多少框架、線條作風、顏色飽和度等。不管是在網站,照樣在平面媒體中,相幹主題的視覺表示情勢都具有高度的同等性。

  在Protein中,藝術傢們的照片其實不是同一拍攝的,但從視覺後果上看,不管構圖、景深照樣光影等方面,這些照片都具有類似的表示。圖片個別之間在視覺上的同等性,可使頁面表現出優越的團體感。

  不外在許多情形下,我們確切難以對頁面裡的圖片表示情勢舉行有用的治理。一方面,用戶上傳的圖片是難以掌握的,別的,對付消息網站或博客來講,也弗成能由於表示情勢的題目而舍棄具有主要內容代價的圖片。別的,客戶也一定有預算去支撐圖表或插圖的從新繪制,計劃師必需應用現有資本做事兒。在這類情形傍邊,能夠試著經由過程邊框或相似的元素對圖片舉行潤飾,如許做最少能夠為圖片增加一種同一的視覺屬性。

  計劃思緒與技能

  先龐雜,後簡化

  在頁面計劃的進程中,我們必定要將各類界面元素一點點的安排在頁面裡。為瞭打造簡練的計劃計劃,許多計劃師平日會在這類時刻投鼠忌器,下沒有去手。這會致使全部流程傍邊缺少需要的摸索性,並且終極的計劃計劃每每會讓人覺得慘白與空泛,而非簡練。人人多若幹少應當都有所領會,假如命運運限好的話,摸索進程中的那些happy accident每每能帶來料想沒有到的冷艷後果。

  以是,我們無妨嘗嘗先龐雜,後簡化的思緒。在計劃流程早期,沒有要對界面元素的數目舉行銳意的限定,同時隻管多測驗考試一些分歧的結構計劃,直到需求所需的內容及功效元素全體就位,然後開端簡化事情。

  問一問本身,有哪些元素是真正須要放在這個處所的?,試著移除一些幫助性的元素,不雅察部分或團體頁面構造是不是是以而遭到損壞,假如沒有,那末拋棄蠻好。

  列位也許有聽到過80%的產出源自20%的癥結性投入這個說法(80/20軌則),我們一樣能夠將這個實際應用到計劃事情傍邊。許多情形下,頁面團體計劃計劃給用戶帶來的體驗感知是以個中一小部門癥結元素為基礎的。對付這類元素,我們要有充足的辨識才能,並環繞它們舉行重要的計劃事情,同時對其他元素舉行公道的簡化。

  這傍邊另有一個比擬適用的小辦法。我們能夠找來一些與項目無關的局外人,對當前的計劃計劃舉行評價。在這個進程中,向他們說明每一個界面元素自己及其視覺表示情勢的感化和意義。假如你發明本身對付某些元素沒法給出除看上去很酷、其他網站也是如許做的之外更具壓服力的說明,那末就斟酌對它們舉行簡化或是移除吧。

  在閱歷瞭如許一個進程以後,終極留下的頁面元素就是可以或許幫你修建最簡計劃計劃的素材。

  微調,再微調

  道上的同夥們認為我老是愛好沒完沒瞭的折騰計劃計劃,我至心認為這類評價是對我的贊賞。

  在我看來,計劃流程歷來沒有真正停止的時刻,我們老是能夠將計劃朝著準確的偏向再推動一點。說端莊的,在這方面,問問那些和我互助過的計劃師或練習生,他們會告知你,隨著我幹是何等苦逼的一件事兒。我估量也是,當我讓他們在一些暗影的細節上修正瞭12次以上的時刻,根本沒人會認為故意思瞭。

  正像我們在前文傍邊懂得到的,簡練是由界面結構、筆墨付梓、配色計劃、元素表面等多方面要素協同組成的綜合體驗效應。以是,在全部流程中,消費大批時光在每一個方面的細節傍邊舉行糾結是必須的,這能怪我麼?這裡增大點行間距,那邊的外邊距減小兩像素,把邊框線的色彩由#EEE改成#DDD如許的修改聽上去其實不主要,但當全部這些微調配合感化在頁面團體上時,渺小的差異所累加起來的綜合效應就會變得異常顯著。

  以是,微調吧,然後再微調些些。許多時刻,在一個細節傍邊的調劑還會激發別的一處的修正需求,偶然乃至會對全部計劃計劃的偏向形成影響。沒有怕,耐煩些,簡練至上的計劃目的須要我們支付的毫不會像終極制品看上去的那末簡略輕松。

  大局不雅

  我前半輩子重要是一位印刷計劃師。說是印刷,實在本身做瞭許多打印事情,由於天天在事情傍邊都邑反重復復地將各類稿件打印出來並釘到墻上。長此以往,幾面墻上都釘滿瞭各類視覺計劃的打印稿。

  在轉業做Web計劃以後,我武斷沒有打印瞭,由於我認為終極產物隻會上上線罷瞭,完整沒有會觸及到出書印刷一類的題目。因而在很長一段時光內,幾個墻面都是一無所有的。不外逐步的我卻開端思念起曩昔的日子瞭。將項目傍邊的計劃稿一張張的打印出來並釘到墻上,這類簡略直白的構造方法實在能夠給我們帶來一種很顯著的大局不雅,使我們可以或許站在全局的層面上對頁面舉行不雅察和評審,並有大概發明更多能夠被簡化的細節元素。

  比擬之下,在Photoshop或Illustrator中經由過程切換圖層來比較視覺稿的方法就會讓我們的視野遭到很大的范圍。以是我發起列位好好應用一下紙張及墻面,經由過程這類方法來發明分歧頁面的計劃計劃在同等性等方面的缺點,去除有大概影響到簡練計劃的反面諧身分。

  對沒有住瞭情況,對沒有住瞭大樹。

  本站首創編譯文章。如需轉載,請說明:本文來自Be For Web

  英文原文:

  /web_design/elements-clean-

  譯者信息: C7210 – Web計劃與前端玩傢,現就任於民眾點評網產物部用戶體驗計劃組(UED

Comments are closed.