<address id="jzxfj"></address>

<noframes id="jzxfj"><form id="jzxfj"><nobr id="jzxfj"></nobr></form>
<listing id="jzxfj"><listing id="jzxfj"></listing></listing>

<form id="jzxfj"><th id="jzxfj"><th id="jzxfj"></th></th></form>

<form id="jzxfj"></form>

    [科技]網頁可視化設計的 5 大要素

      文章來源: TNW News , TECH2IPO/創見 陳錚編譯,創見首發,轉載請注明出處

      創見干貨:網頁可視化設計與其說是科學,更像是一門藝術,但是它有著一些基本的要素,尺寸、色彩、布局、空間與風格都能對于頁面效果有著顯著的影響。在本文中作者使用了大量網站實例進行剖析,不論你是否從事網頁設計工作,這些兼具美感與功能性的網頁設計都值得點進去一看。

      好的網頁可視化設計不僅僅能影響網站流量與用戶決策,更能夠讓你的網站看起來十分美觀。

      網頁設計有其基本的美學原則,你可以從很多文藝復興大師的作品中找到靈感,但是網頁設計的首要目標還是讓特定內容更易讀、鼓勵用戶注冊登錄以及產生相應的行為。網頁設計工作的出發點是改善用戶的使用體驗,而不僅僅是表現美感。

      設計師要做的是先完成自己的工作目標,然后再去向藝術大師們致敬。

      從基本上看,可視化設計就是找出哪些元素最能夠吸引用戶注意力。但是想要通過網頁設計達到這個效果卻不存在固定的模式,具有競爭力的設計師們應該綜合利用各類方法,或者是自己創造出新的版式,這樣才能保證自己始終立足行業之巔。

      在下面我們要介紹 5 種網頁可視化設計中最為基本的元素,無論你的設計簡約還是復雜,這些元素都是設計當中最為必需的環節:

      1、尺寸

      船的大小決定了它在海里的運動方式,話糙理不糙。

      更大的圖標看上去更為顯眼,不過并不代表著是更好的設計。簡單來說就是你最為重要的頁面元素當然應該使用最大尺寸,但是涉及到細節部分,處理起來就復雜得多。

      費茨定律的原則之一就是放大可點擊區域,目標越大用戶就越容易點中。換句話說,使用大圖標可以讓用戶更為輕松地點擊進去,這一點在引導用戶瀏覽行為時非常管用。

      當然了,這并不是說你把「立即下載」圖標簡單地放大十倍就能有顯著效果,在網頁設計中讓各個元素之間形成微妙的和諧感才是關鍵。

      比如說上圖中的 Teye 網站,你認為設計師最想要你在瀏覽過程中產生什么樣的互動呢?

      網頁正中那個巨大的、可點擊的互動式產品圖片毋庸置疑是最能吸引注意力的,這種效果完全來自它異乎尋常的尺寸。事實上,設計師甚至無需使用文字介紹去促使用戶與產品互動,產品圖片具有對比性的顏色和尺寸已經吸引了用戶用鼠標去轉動它。這種設計手法的結果就是讓用戶無需分心注意環繞產品圖片四周的小圖標,當你需要進一步了解產品時,點擊這些小圖標它們的尺寸會自動放大,并且彈出詳細的產品介紹。

      除了吸引用戶點擊之外,圖標尺寸大小對于網站的整體視覺效果也起著關鍵作用。依據圖標尺寸大小,它們甚至可以影響人們瀏覽網頁時從左到右、從上到下的閱讀習慣。此外,由于尺寸大小是一種相對的存在,因此使用大小對比也能達到一定效果。除了簡單地把圖標調大以外,你還可以通過縮小其他設計要素來營造出顯著的視覺效果,這一招對于節省頁面空間相當有用。

      尺寸大小還會影響到文字排版,主標題、副標題以及正文都應該有所區分。Smashing Magazine 針對 50 個最受歡迎網頁做了統計研究,發現它們的平均尺寸為:

      標題:18-29 像素

      內文:12-14 像素

      所有關于尺寸大小的原則都在 上圖 中體現得淋漓盡致。一眼看去你首先注意的就是巨大的 H 型公司 LOGO,然后是旁邊的「Nike Making」,它所使用的較大字號以及加粗效果使得其看上去十分顯眼。位于加粗字體下方的幾行文字使用了較小字號,因此它們不會分散瀏覽者針對主要元素的注意力。如果你對于該頁面足夠有興趣想要四處看看,就會注意到位于角落里的小 Logo 以及菜單目錄,甚至是位于頁面右邊的導航欄。

      這種可視化設計是很有借鑒意義的。首先,巨大的彩色 H 型 Logo 能夠抓住瀏覽者的眼球,然后你會看到旁邊具有對比效果的附有超鏈接的說明文字。視覺可視化設計引導出了用戶的瀏覽路徑,就像費茨定律說的那樣,放大可點擊區域可以使得用戶更為輕松的點擊,加強互動效果。

      讓瀏覽頁面的用戶最終點擊進去進一步了解產品,這就是設計師想要得到的效果。

      2、色彩

      網頁設計中的色彩是經過精心選擇的,即使是簡單的黑白效果也有著諸多講究,色彩的運用將會對于用戶的視覺體驗產生不可忽視的影響。

      首先要知道的是每一種色彩都有其對應的心理聯系,這一點我們在很多文章中都有所了解。除此之外,色彩本身也有其自己的吸引力層次,比如說黑色和紅色就更能引起注意,而淺黃色與奶油色就會讓人一眼掠過。

      色彩可以增強用戶的視覺體驗,你還可以通過不同色彩之間的對比來制造反差。將兩種對比強烈的色彩組合在一起能夠比互補型色彩組合更惹人注目,比方說將黃色的圖標放在藍色的背景圖上的顯眼效果會大大好于紅色圖標與藍色背景的組合。

      顯然,身為設計師與藝術總監的 Vito Salvatore 深諳此道,上圖取自其 個人主頁 ,很好地展示了他的設計功力。該圖在色彩的運用方面將漫天飛舞的黃沙與深藍色天空形成了鮮明對比,達到了一種視覺上的動態效果。而出于功能性的考慮,他選擇使用帶有鏈接的白色字體,在壯麗的背景圖襯托之下更顯優雅。

      仔細觀察該圖你會發現棕褐色沙塵實際上與藍天形成了互補,你可以看到色輪。雖然這在照片中可能只是純粹的巧合,但是在審美上卻達到了一種平衡。揚起的黃褐色沙塵創造了一種視覺運動路線,將你的目光指引到紅色的車身方向(也將你的視線帶往了白色文本所在位置)。

      當我們解構一個頁面設計之時,你能夠從中發現別人是如何運用色彩、視覺效果、排版來將你的視線引導到整個頁面中最有價值的部分。

      3、頁面布局

      網站頁面布局是用來引導瀏覽者視覺落腳點的最為直接的方式之一。為了引人注意,你可以將一個設計元素安放在頁面中最頂部位置。但是關于如何使用布局提升用戶注意力,可不僅僅是置頂操作能夠簡單涵蓋的。

      影響頁面布局的主要因素就是像素大小。費茨定律在網頁設計發方面的另一指導意義就是將可點擊圖標放在鼠標最易到達的位置。在網頁設計的實踐中,屏幕角落與四邊相比頁面中間的固定一點對于用戶來說更容易點擊。

      雖然在設計網頁時你可能仍然會更加關注屏幕中心位置的排版,但是可點擊鏈接應該一直位于最易點擊的角落與底部位置。當頁面滾動時其中心位置會隨之發生變化,但是網站 Logo、菜單目錄、聯系方式以及社交網站鏈接應該一直位于它們的固定位置。

      你的頁面布局不僅會影響可視化效果,也會影響到可用性。格式塔原則顯示了人在觀察物體時有趨向于使不完整的形狀完整化的趨勢,因此在設計網頁時可以利用文字排版以及顏色來引導用戶的視線運動。網頁中的行列設計除了讓布局顯得井然有序之外,還能夠在行列末尾創造出一個安放廣告以及重要內容的黃金地段。

      如上圖所示, Huncwot 網站的主頁設計就使用了水平線布局,無論你停在哪個部分都會展示出動畫效果。

      當你決定采用何種頁面布局時,要牢記席克定律的要義——可選項越多,人們的決策過程越長。是給予用戶更多選項還是將其限制于最精華內容之中,你需要從中找到最佳平衡點。這種考慮會影響你對于頁面布局的選擇,因為你既不希望大段的內容給用戶帶去負擔,但是又要提供足夠的信息讓用戶滿意。

      這種平衡感相當微妙,但是對于頁面設計來說卻是必需的。如果你將一堆設計元素充斥于頁面之中,你的網頁看上去就會十分平庸,毫無設計感可言。

      4、空間

      空間與頁面布局息息相關,適當的運用頁面空間能夠引導用戶的視覺路線,并且在一定的情況下還能夠起到解釋與闡述的功能。頁面空間主要通過這兩種方式發揮作用:間距與留白。

      對于網頁設計者來說間距是一個非常有力的工具,它可以僅僅通過視覺效果表達出一個設計元素的意義。早在 20 世紀早期,心理學家就發現了人類具有不需要學習的組織傾向,這種傾向使我們能夠在視覺環境中組織排列事物的位置,感受和知覺出環境的整體與連續,這就是在上文中我們提到的格式塔原則。

      In Pieces 網站就很好地向我們展示了如何利用格式塔原則。

      與頁面中央圖像具有直接聯系的元素被安置在圖像下方,與該頁面相關的導航選項統一組合在頁面右側。而整個網站的導航欄則作為整體安排在頁面右方,其他相關鏈接則統一安放在頁面底部。同時還需要注意的是,該網頁在設計中將滾動選項放在了頁面水平線上最為顯著的位置。

      讓我們在再來看看網頁設計中如何運用留白。設計新手通常會犯的一個錯誤就是將網頁中的空白當成是空白畫布一般,總想著去將其填滿,而沒有意識到留白本身就是一種設計工具。有經驗的設計師都明白網頁中展現的視覺元素越少,主要元素就愈發凸顯。在重要的元素之間適當留白,可以讓它們始終處于用戶的視覺中心。

      Dmitry Fadeyev 針對頁面留白的設計方法進行了研究,發現在段落與頁面邊緣適當留白可以將用戶對網站的理解能力提升 20%。

      Nua Bikes 就為我們展示了一個運用留白的好例子。其頁面設計極致簡約,也沒有能夠形成視覺對比的元素組合,該頁面設計將用戶所有目光都集中于最為重要的信息上——有自行車供出售。

      想要更多地了解頁面留白的魔力,我推薦你進一步閱讀設計師 Mark Boulton 的相關文章,他在細節上剖析了留白手法的使用,展示了留白的積極與負面影響,還將留白分為了宏觀與微觀兩大種類。

      5、風格

      我們講述了這么多種網頁設計中所涉及的要素,并不是想讓人以為網頁設計是一種可以量化且方法唯一的實踐。設計師的個人風格將在紋理、圖片以及圖標的選擇中得以體現,這些都會影響網站的可視化效果,并且體現出你的個人審美品位。

      體現個人風格最為強大的工具就是使用紋理,如果使用得當,紋理在體現網站深度與烘托氛圍上能夠起到與尺寸及色彩同樣的效果。下圖就是一個最為清晰的例子:如果背景顏色單一,那么使用帶有紋理的圖標會相當顯眼;當你使用了帶有紋理效果的背景圖時,頁面上不具有紋理效果的圖標就會得以彰顯。

      當你瀏覽 Le Mystère de Grimouville 網站時,帶有紋理效果的標題不僅僅能夠吸引注意力,還營造出了一種復古的風格。在該頁面中,主標題的紋理、尺寸、位置統一發揮了作用,使得它和下方的重要性偏低的文本區分開來。

      該網頁設計中對于紋理的使用還創造出了一種神秘的氣息,這與該網站的主題相符合——它講訴了一個在過去四年中諾曼底 140 位居民遭遇的鬧鬼故事。

      Jib Strategic 網站是一個與 Le Mystère de Grimouville 完全相反的例子,它在背景圖上使用了紋理效果,用以凸顯頁面上的內容。該網站的設計不僅僅是抓住了用戶的目光,還打造出了一種木質紋理的復古風,但是頁面中所使用的新穎排版和可愛的圖像又讓它看上去相當時尚。

      除了紋理之外,你所選擇的圖像以及圖形的風格也會影響到頁面的視覺層次?;ㄇ蔚膱D標設計與 Logo 能夠吸引注意力,同時也反映了設計者的特點。同樣,無論你的網站采取了何種布局與配色方案,豐富的圖片與設計感的圖標都會抓住眼球。

      在 Risotteria Melotti 的網頁設計中淡化了對于顏色的使用,但是它的內容仍然具有吸引力——背景中那一道美味的菜肴看上去非??煽?。事實上該網站對于紋理的使用并沒有使用傳統的格式、陰影以及圖像,它只是采用了內容豐富的圖片去展示一個古樸的餐桌,僅僅如此我們已經能從屏幕中感受到那種環境氛圍。

      這張照片被使用在了背景圖中,同時頁面上的圖標也給我們留下了簡潔明快的印象。

      在進行可視化設計時不要低估人的創造力,他們有時候能夠打破常規,出奇制勝。但是在使用紋理的時候適度是非常關鍵的,切記過猶不及,大量堆砌的紋理只會讓你的網頁看上去俗氣老土。

      總結

      學會使用以上這些設計元素是一個網頁設計師的基本功,但是明白什么時候該用哪一種,乃更進一步組合使用這些元素,就需要對于這些技巧的熟練掌握。你在網頁設計中所使用的每一種元素都會互相融合,最終一起去爭奪視覺優勢。即使你的設計是像素級別的,用戶在瀏覽網站時也會帶上他自己的偏好。

      要記住網站設計不是一門科學,它更像是一種藝術創作,大膽去實驗和發揮自己的創造力吧。

    闺蜜男友又大又粗又黑
    <address id="jzxfj"></address>

    <noframes id="jzxfj"><form id="jzxfj"><nobr id="jzxfj"></nobr></form>
    <listing id="jzxfj"><listing id="jzxfj"></listing></listing>

    <form id="jzxfj"><th id="jzxfj"><th id="jzxfj"></th></th></form>

    <form id="jzxfj"></form>