<em id="dx444"><object id="dx444"><input id="dx444"></input></object></em>
新聞觀點

網頁設計師關于創造完美網站布局的20個步驟

標簽: 網站建設 ? 網頁設計 ? 網站布局 ? ? | 作者:錦明網絡| VISITORS: | 來源:錦明網站SEO
23
Sep
2016
在這篇文章中,Claudio Guglieri將為你詳細解讀網頁布局設計的全過程。

  在我們開始討論有關網頁布局的主題之前,我首先想到了我在多年的設計生涯中看到過的一些常見錯誤,特別是網頁設計新手和實習生常會犯的那些錯誤。

  在文章后面列出的完美網頁布局設計的20個步驟中,我嘗試覆蓋到我認為每一位網頁設計師在他們開始新的項目之前都應該知道的內容,以及他們在網頁設計流程中應該注意的內容。

  這些原則不僅包括了諸如登陸頁設計在內的設計方面的內容,也包括如何使得工作成果更完美的工作流程分析。學好它們,你就在成為專業網頁設計師的道路上邁出了第一步。

  1.先把你的想法畫到稿紙上

網頁設計師關于創造完美網站布局的20個步驟

  原始草圖:世界各城市

  這顯而易見,但是我卻常常發現設計師們經常跳過這一步,在考慮任何可能會遇到的問題之前就直接打開Photoshop開始工作。設計是要解決問題的——如何有效傳達信息的問題。這些問題不是通過添加或者陰影就能解決的,只有好的網頁布局和層級結構設計才能造就出優秀的網頁界面。在你打開Photoshop之前,好好考慮你的網頁內容、網頁布局和層級結構。

  2.從繪制頂級框架開始

網頁設計師關于創造完美網站布局的20個步驟

  繪制基本的鏈接關系有助于你解決UX問題和構建網頁布局

  當我被要求要為網頁設計出“感覺”時,我做的第一件事就是設計網頁的頂級框架,這會解決所有的設計問題。這里所說的框架指的是在網頁內容周圍的UI(用戶交互界面),它們引導用戶瀏覽網站,框架包括導航和類似側邊欄和底部導航欄的交互元件。

  如果你在設計時采用這種方法,你就會在設計首頁之外的網頁時,對你的布局的需要有一個清楚的了解。

  3.在你的PSD文件中添加網格

網頁設計師關于創造完美網站布局的20個步驟

  10像素基線的978個網格

  這就和它聽起來一樣簡單。在Photoshop中設計任何東西之前,你最好先繪制一個網格以備參照。沒有明顯的理由不使用網格,但是有明顯的理由使用網格!我可以保證,有網格,你肯定能做得更好!

  網格幫助你完成界面的劃分,網格能引導你的設計滿足不同大小的屏幕的需求,在諸如留白等方面保持設計上的一貫性。

  4.選擇字體

網頁設計師關于創造完美網站布局的20個步驟

  一個通用的原則就是,在網站布局中不要使用超過兩種的字體。

  探索使用不同的字體和顏色是項目設計過程中不可或缺的一步。我推薦在網頁中不要使用兩種以上的字體,但是你也可以依據實際情況進行增減。一般來說,選擇一種容易閱讀的字體(用于大段的文本)和一種有趣的字體(用于標題和交互)即可。不要害怕使用大字體??偟膩碚f,在使用字體時一定要注意保持趣味性和連續性。

  5.選擇顏色主題

網頁設計師關于創造完美網站布局的20個步驟

  使用有限的顏色和色調來避免視覺疲勞。

  在為你的網頁選擇一套字體的過程中,你應當從考慮在UI、背景和文本中使用何種顏色開始。對于一般的用戶交互界面,我推薦使用有限種顏色和有限的色調變化。

  在UI設計環節,請務必在保持配色的連續性的同時參考元件的功能。參考下Facebook、Twitter、Quora和Vimeo(翻譯小編表示:很不幸,這些網站都是得fq才上得去的)的布局設計。除了UI之外,不應該對插畫或細節有任何顏色限制——只要它們不和UI元件的功能有所關聯就行。

  6.將布局分塊

網頁設計師關于創造完美網站布局的20個步驟

  網站的結構越簡單,用戶瀏覽起來就越容易

  你網站的每一個部分都需要有話可說,需要有閱讀的價值,而布局則應當有助于凸顯文章中的亮點內容。實際上,在同一張頁面上不應該有太多的動作呼告,所有的一切都應該有助于瀏覽者明白“我能在這兒做什么”。

  從一個簡單的目的出發,構想一個你能想象得出的最簡單的布局,然后再加上有必要添加的元件,到最后你就會驚訝的發現,保持布局的簡潔是如此之簡單!

  7.反思現有的

網頁設計師關于創造完美網站布局的20個步驟

  我們真的需要一個搜索框嗎?在大多數情形下,答案是:不!

  作為設計師,我們塑造了人們瀏覽互聯網的方式,我們決定了完成一個簡單的操作所需要的步驟,我們決定了我們的網站是否有效率。設計樣式和范例之所以存在,是因為它們確實有效。但是,有時候它們之所以存在只是因為沒有人花時間思考它們存在的意義。這很重要:去重新考慮已有的交互方式,看看我們如何才能提升它們。

  8.挑戰自我

  我鼓勵每個設計師在他們的每個項目上都能夠挑戰自我。項目并不總是需要有所創新的,所以創新這回事完全靠我們設計師的主動性。挑戰的例子包括哪些?比如使用新的網格系統、創造一個新的元件、或者更多細微之處的超越:避免混合模式或使用一種特定的顏色。

  9.完善細節

網頁設計師關于創造完美網站布局的20個步驟

  游戲半成品:扣扣細節

  這是個老生常談的問題但實際上最終的產品總是有很多細節缺陷。取決于項目背后的理念,“細節”可以變現為很多種形式。它可以是一個小交互元件,一種出人意料的動畫,也可以是在按鈕上的一點漸變或者方框周圍的描邊,但總的來說,這些細節必須是有實際需要的,而且看起來是自然的。

  10.對每一個元件高標準嚴要求

網頁設計師關于創造完美網站布局的20個步驟

  留心每一個元件,總體大于部分之和

  我得承認這一部分不是我想出來的,我是在 Fantasy Interactive上看到的。我真的驚訝于這句話是多么正確和明晰。每一個元件都應該被設計得即使被單獨拎出來開,也是一個杰作。有些設計師會把這些小問題遺留在“待處理”上,然后到最后也沒想起來它們。

  11.銳化你的設計

網頁設計師關于創造完美網站布局的20個步驟

  為了避免像素的模糊,嘗試在筆畫和背景或背景顏色之間創建合適的對比

  除了美學的考慮之外,為了創建一個干凈的作品,也有一些普遍的問題需要避免。當你修改你的作品的時候,你需要關注的問題包括漸變的失真、毛糙邊緣、字體渲染選項(有些字體依其不同的大小,應用不同的渲染模式才會顯得好看),還有和背景混到一塊的線條。

  這些問題只是一些基本的例子,但在現實中這樣的例子舉不勝舉??偸前涯愕脑O計當做一個整體來看是否一切都能協調運行,然后再仔細地分析每一個組件。

  12.保持PSD文件的有序和整潔

  這個(還有網格的使用),是使用Photoshop進行設計時最應該記住的幾條建議之一。除了項目的大小和參與人員的數目,你還要保持你文件的整潔,這將使得出階段成果更加容易,加速設計流程,以及便于和其他設計師交流及分享。

  13.一顆紅心,兩手準備

網頁設計師關于創造完美網站布局的20個步驟

  牢牢記?。耗愕牟季衷诓煌脑O備和屏幕上會如何運作

  作為設計師,我們的任務就是在各種各樣的限制下解決問題。在網頁設計中,這些限制包括概念性、技術性的問題,也包括與內容有關的問題。

  我們建立的站點不僅需要能在理想的設備上完美呈現,在不理想的情況下也不能顯得太差勁。然而,為了呈現我們的作品,我總是強烈推薦為最好的情形設計網頁。因而,我們為最多數用戶的理想使用情景設計網頁。

  14.反復觀察,直到厭煩你的設計

  如果你對設計充滿激情,我確定這就是你也在做的事情。當我做完一項令我自己都感到自豪的作品時,我都會把它作為我生命中的一部分。我會給它截屏,用它當屏保,甚至把它打印下來然后貼在墻上。

  這樣做的結果就是,我最終就會變得討厭它了,我開始看出它的缺陷并最終把它打入冷宮。討厭你當前的作品,是一種成熟的標志,它意味著你總算從你的錯誤中學到了些東西。

  15.在和你的客戶分享之前,避免花費過多的時間在一個概念上

  當你想到一個新的交互概念或者一個“看起來很有感覺”的設計點子的時候,你需要確定你的客戶也這么想。如果你的客戶也喜歡你的想法的話那還好辦,盡可以放手去做,但是萬一客戶不喜歡你的新創意,那你就不得不花費很多時間把你的設計改回去。在把新概念付諸實施之前,盡可能多地收取客戶反饋。

  16.做程序員最好的朋友

網頁設計師關于創造完美網站布局的20個步驟

  Yahoo的Rafael Mumme給出了幾條幫助射雞濕和程序猿融洽搞基的好建議:http://creativebloq.com/design/20-things-drive-web-developers-crazy-7116930

  程序員們也都是有創造力的人類呢,相比于設計師,他們對他們的工作也有近乎狂熱的情感。但他們往往不是在項目一開始就加入進來,往往是概念決定以后,他們的創造力才會有用武之地。這個程序是錯誤的。有些最好的點子就來自于開發團隊,所以在項目開始之前就和他們團結協作。和他們分享你的概念和激情,這將會引發出更多的好點子和更好的最終成品。

  17.展示:把我當三歲小孩吧

  展示你的設計和設計本身一樣重要。如果你的展示一塌糊涂,你的設計也會被拋進垃圾桶。永遠記住,那些第一次看見你的設計的人可不像你那樣對它有足夠的了解。

  18.愛你的設計,但不要迷戀

  知道如何維護你的想法,也要學會明白有時候你可客戶就是不會認同你的想法。作為一名設計師你需要對你做得事情有堅定的信心,但是你也應該能以open的心態迅速推翻一個想法并提出些新點子。不要忘了,解決方案不止一種。

  19.追蹤你的設計,直到開發環節

  如果你在一個工作室工作,你或許已經發現活真是一個接一個的來啊,上一個剛進入開發環節,新任務就又來了。和通常的看法相反,你的工作絕不止于將PSD文件交付給下一環節。如果你真的希望你的設計能夠完美呈現的話,記得時不時和程序員朋友們溝通一下,幫助他們同時確保你的設計中的每一個細節都付諸實現。

  20.在設計社區分享你的設計進度

網頁設計師關于創造完美網站布局的20個步驟

  作為設計師圈子中的一員,我們不僅喜歡看別人的成果,也樂于看到項目是如何進行的。在為社區的知識庫做貢獻的同時,你也會收到有價值的建議或反饋。



轉載聲明:本文由滕州網站優化-錦明SEO網絡整理發布
轉載請注明來源:http://www.k30302.cn/new/jianzhan/103.html
相關新聞
最新新聞
最新案例
錦明網絡—幫助企業塑造網絡品牌影響力,您身邊的網絡營銷專家!
分享按鈕 2018年一期东方心经 吴堡县| 招远市| 高碑店市| 甘谷县| 米泉市| 浙江省| 桃园市| 突泉县| 大连市| 定陶县| 景洪市| 美姑县| 新兴县| 金湖县| 阿坝县| 南华县| 呼和浩特市| 英山县| 天柱县| 普定县| 开封县| 昌平区| 湄潭县| 长春市| 龙山县| 安康市| 平和县| 合作市| 和田市| 达拉特旗| 义马市| 湛江市| 当雄县| 台前县| 合江县| 阜新市| 宜宾县| 嘉兴市| 资讯| 宜宾市| 安平县| http://m5.sina5nm0.pw http://www.sinav6x.pw http://500.ukfzb5.top http://v.sina0ehu.pw http://china.72fru9.top http://www.jie83.cn