網站ui設計優秀模板

1、有哪些UI設計師的好網站

1、站酷
站酷(ZCOOL),中國人氣設計師互動平台。深耕設計領域十年,站酷聚集了470萬優秀設計師、攝影師、插畫師、藝術家、創意人,設計創意群體中具有較高的影響力與號召力。
2、花瓣
花瓣網, 設計師尋找靈感的天堂!圖片素材領導者,幫你採集,發現網路上你喜歡的事物.你可以用它收集靈感,保存有用的素材,計劃旅行,曬曬自己想要的東西
3、千圖網
千圖網是專注免費設計素材下載的網站!提供矢量圖素材,矢量背景圖片,矢量圖庫,還有psd素材,PS素材,設計模板,設計素材,PPT素材。
4、behance
Behance 是 2006 年創立的著名設計社區，在上面，創意設計人士可以展示自己的作品，發現別人分享的創意作品（上面有許多質量上乘的設計作品），相互還可以進行互動（評論、關注、站內簡訊等）。
《Behance》是一款Android平台的應用。

2、UI設計和網頁設計的區別？

要想了解這兩者的區別，就先來看看他們的定義是什麼。UI設計是指軟體的人機交互、操作邏輯、界面美觀的整體設計，用自己的話來說就是設計軟體和用戶的互動方式。而網頁設計是根據企業希望向瀏覽者傳遞的信息，進行網站功能策劃，然後進行的頁面設計美化工作。現階段的UI設計，通常來說是一定程度上包含了網頁設計的內容的，目前的UI設計面向的方向很廣泛，除了UI設計，還包括了網站管理、網頁設計、交互平台設計、app移動界面設計、用戶體驗、產品設計、電商包裝設計等。而網頁設計通常來講是專門負責網站中各個頁面的設計。而網頁設計中，最先提到的就是網頁的布局。布局是否合理、美觀，將直接影響到用戶的閱讀體驗及訪問時間。

總之，UI設計包含有網頁設計的內容，但是網頁設計是一種更專業的網頁界面、布局等設計。

3、如何利用UI設計一個清晰的網站結構

UI網頁設計和網站建設不同，網站建設單單只是通過程序源碼實現網站功能的實現，而UI設計則是體現在視覺角度，當兩者相輔相成之時則將會成就網站建設的核心。深圳網站建設公司都會配備有專業的全職設計師，可能在設計師的需求上大都是創意，然而在我們真正做一個項目或者工程的時候則會發現「藝術家並不是需要創新，而是需要會活用技巧。」優秀的設計效果離不開技巧的運用，而技巧的運用則能夠烘托出設計之美。
新華針對UI網頁設計的實戰經驗和總結，以直觀的改善網頁視覺效果為目的來提升網站的高級感為目的，從網頁的設計層次、字體、結構、對比、透明度等諸多因素上進行對比和調整，其詳細內容可以分為以下幾點：

1、使用色彩和字重來創造層次結構，而不是單純的大小對比

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過於過度依賴字體大小差異來營造對比。

單純實用字體大小對比，所營造的對比並不夠，嘗試結合色彩和字重來營造更好的對比效果。

如果可以的話，你甚至可以採用兩到三種顏色：

（1）主要內容採用深色（諸如標題，但是不要用純黑）

（2）次要內容採用灰色（比如文章發表日期）

（3）輔助性內容採用淺灰色（比如頁腳中的版權聲明）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

（1）大多數的文本採用正常的字重（400到500，具體取決於字體）

（2）對於需要強調的文字採用較重的字重（600到700，具體取決於字體）

應當盡量不要讓正文部分字重低於400，因為這一部分字體字體本身尺寸已經較小，低於400會使得可讀性不佳。如果你依然需要降低字重，那麼不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

2、不要在有色背景上實用灰色的文本

在白色背景下，將黑色的文本改成灰色，是不錯的淡化其視覺效果的做法，但是在彩色背景下這么做，則是另外一回事。

實際上，讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下，想要降低對比度是應該讓文本逐步接近背景色，而不是改為灰色。

想要降低和背景色之間的對比，通常有兩種方法：

（1）降低白色文本的不透明度

降低不透明度，能夠讓背景的顏色透過來一些，以一種不沖突的方式降低前景文字和背景之間的對比度。

（2）基於背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候，半透明的文本會影響可讀性，這個時候最好是基於背景主色調來挑選相應的文本色。

（3）陰影設計

相比於採用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特徵，光線從上往下照下來所營造的陰影效果。

如果你對此有興趣，Material Design Guideline 非常清晰地給你講明白了這樣的陰影的製作細節。

4、盡量少使用 Borders

盒子模型是網頁前端最常用到的工具。當你需要在兩個元素之間創建分隔的時候，盡量避免實用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，甚至會造成混亂。

所以你可以嘗試下面的辦法來規避：

（1）使用 box shadow

box shadow 同樣可以營造出邊界感，而且更加微妙，並不會顯得突兀，不會分散用戶的注意力。

（2）實用不同的背景色來區分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊採用不同的背景色，並且嘗試刪除邊框，因為你根本不需要它。

（3）增加額外的留白

創建元素之間的分離效果，並不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

5、不要讓小圖標無端地放大

當你在設計著陸頁的時候，可能會突出產品的功能，這個時候你需要一些大圖標來作為視覺錨點，這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網站找幾個免費的矢量圖標，然後放大到符合你需求的尺寸。

它們都是矢量圖標，照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍，它固然無損，但是在視覺上就顯得頗為不專業了：缺乏細節，總感覺過於矮胖。

可是，如果這些小圖標是你唯一能夠搞得到的素材的話，那麼不妨試著將它置於另外一個帶有顏色的圖形當中：

這樣的設計不僅能夠讓圖標達到預期的視覺體積，而且看起來要比單純放大，看起來細節會更多一些。當然，如果你手頭不是那麼緊的話，最好還是買幾個大尺寸的高素質圖標，比如 Heroicons 或 Iconic。
真正而有效的UI設計需要符合用戶、符合網民的需求進行設計，在網站建設的基礎上完成網站的維護，網站建設離不開UI設計，所以掌握以上技巧後運用到設計中輔助網站建設，將會使得用戶對網站的體驗感和高級感更加滿意。

4、老闆問我，很多網站都提供免費建站模板，你一個UI設計，覺得自己設計和模板建站比，有什麼本質區別？

首先，設計是服務於商業的，一般建站工具所設計的模板是有一個流程的，要保證生產效率高，產出多，讓客戶有選擇，並且大部分主題較為商業化，特色比較不明確這才能夠保證用戶在短時間內選出大范圍內適合自己的模板。 而設計師找到現成模板，可以藉助其產品思路，再去想一些更契合公司文化的內容，以此調整到最適合自己公司的企業文化。

5、如何做出優秀的UI界面

一個好的交互設計對產品的成功起著很關鍵的作用。UI所做的就是用戶最先接觸到的東西，也是一般性的用戶唯一接觸到的東西。用戶對於界面視覺效果和軟體操作方式的易用性的關心，要遠遠大於他對底層到底用什麼樣的代碼去實現的關心。如果說程序是一個人的肌肉和骨骼，那麼UI設計就是人的外貌和品格!都是一個成功軟體產品必不可少的重要組成部分!對我而言程序懂得不多所以只是從UI設計與軟體產品整體的關系和如何才能使軟體產品得到最佳的UI設計角度來談。現在我們的軟體產品存在的一些問題有技術方面的問題，但是更多的問題來源於各個部門、各個項目小組的之間的配合。我們現有的開發流程一般都是由市場部門提出客戶需求，產品設計人員提出產品設計報告，開發部門設計開發計劃，由各個小組分別開發一個模塊，最後整合成為一個完整的軟體產品。在這些流程之間UI設計應該參與那一個部分，每一個部分應該做到什麼地步才可以使產品得到最好的UI設計效果呢?下面我們會在每一個部分具體分析。首先分析一下現在的問題所在，在一些軟體業比較發達的國家軟體產品的UI設計過程貫穿了軟體開發的自始至終，而且是必不可少的。而在中國產品UI設計並沒有被廣泛接受，就算是已經有了UI設計師的一些企業也沒有對產品的UI有著足夠的重視，一般來講他們大都會把重點放在如何使用代碼實現所需要的功能，在我看來這只是一個成功軟體產品的一個部分。一個優秀軟體產品的開發過程應該是由四個部分組成: 1.軟體產品的設計(業務建模) 2.系統的設計(技術建模) 3.分單元的開發(把軟體各個部分拆分分單元編寫代碼) 4.測試(分為單元測試、系統集成測試和產品功能測試)，這些是由軟體研發部門做的工作。 除去以上軟體開發過程的四個部分還有用戶需求和用戶驗收測試，這兩個過程是由市場部門和產品用戶一起完成。所以說用代碼實現產品功能(coding過程)只是軟體開發的一個步驟。現在我們回到UI設計的角度來看，作為UI設計人員我們需要全程參與到軟體開發過程中，而不只是在某一個步驟參與，現在在大多數軟體企業里UI設計師只是在產品的coding過程的時候才實質性的參與到軟體開發過程里，而在其它幾個步驟里只是參加甚至根本沒有參加(在這里我要強調「參與」和「參加」是兩個詞的不同概念，「參與」指的是完全加入到開發行列開始進入設計階段，而「參加」指的只是旁聽會議或者提出一些簡單的意見並沒有開始進入設計階段)，這樣就會大大降低軟體產品的開發效率使開發成本成倍上升甚至導致整個產品的不成功!這並不是危言聳聽，下面我們分析一下在一個軟體產品的開發過程中UI設計應該怎麼做、做到什麼地步才能避免上邊提到的那些問題?下面我會根據軟體開發的過程解釋上邊的問題，剛才我提過軟體開發過程的幾個步驟: 1.產品建模 2.技術建模 3.分模塊開發 4.測試，那麼我們也分為這四個部分進行討論: 一.產品建模時期:我們首先來了解一下「輸入」和「輸出」，在UI設計里是很重要的兩個概念，經常會有人過來對我說「我們有一個軟體產品需要美化一下」然後再也沒有什麼深入的解釋了，僅僅這句話我的工作就要開始了，然而這個軟體是給誰用的?是干什麼的?我們卻一無所知!成功的UI設計首先要有完整的「輸入」，怎麼才能叫做完整的「輸入」呢?也就需要UI設計師從整個軟體產品的策劃階段就開始介入，在產品用戶(也就是客戶)向市場部門或者產品部門提出產品需求的時候就要開始參與到產品策劃開發過程中來，這一部分對於UI設計師而言就是第一個輸入階段，並且在這個階段里UI設計師也需要提出一些對產品交互設計的意見，以便產品部門在做產品設計的時候更多的考慮到產品的交互性和功能的簡單表現原則，有很多軟體在設計階段就被加入了許多並不是用的附加功能，其實一個好的軟體設計就是要用最簡單的結構實現用戶的想法，一些可有可無的功能看上去很花哨往往會影響用戶的判斷能力，這些就是產品優化的一些概念了。在此我需要簡單的提一下如果想要深入研究可以看一些有關於產品優化的書籍甚至是心理學的書籍，有很多人認為軟體的優化就是代碼的優化(用最少的代碼實現產品功能)，在我看來這只是程序的優化是針對程序員而言的而不是整個軟體產品的優化，產品優化包含了交互設計在現在的多數軟體企業沒有專門做這一部分的交互設計師所以往往這一部分被忽略，我認為這一部分應該又UI設計師承擔起來，從文章的開頭我就說過UI設計不只是圖形界面的設計，就算是有企業里邊有這樣的優化人員或者交互設計師他們也要和UI設計師一起配合完成產品交互設計，作為UI設計師產品的交互性和易用性是在做設計的時候必須考慮的!言歸正傳，產品設計人員經常不會過多考慮簡單易用原理也就是產品出來用什麼樣的組合形式體現給用戶，這也是UI設計師考慮最多的事情，所以UI設計師一定要在產品建模期間參與設計，給產品設計師一些意見。作為一名優秀的UI設計師我們還要在了解了產品的需求之後更深入了解這個產品的使用環境和用戶群體的使用習慣。我們還需要了解市場上的同類軟體產品的設計方案，研究他們的優缺點，以便在我們設計的時候吸取它們的長處避免它們的錯誤。在產品建模之後一般的都會由產品設計人員給客戶做一次功能設計講解，往往這樣的講解只是文字性質的需要讓客戶想像著理解，這就會造成很大的隱患有的客戶根本無法理解你的講解甚至對這樣的講解根本不認真聽，因為他們根本不懂，在討論過程中他們經常會同意產品設計人員的一切設計想法但是產品測試的時候他們又會提出種種不滿意，我想這是一般的軟體公司都會遇到的也是最最頭疼的事情，但這並不能怪客戶我說過客戶只會關心視覺效果和軟體的操作而並不會去關心我們是怎麼實現這一切的。這種情況帶來的直接後果就是產品的反復修改開發成本成倍上升，怎麼避免呢?這就要靠UI設計師了，俗話說「眼見為實，耳聽為虛」，所以需要UI設計師做出一個產品整體效果的demo。這個demo用圖片的形式表現就可以，我們只需要將要體現的產品界面做一個拼湊就可以了，因為這並不是產品的最後樣子，只是協助產品設計人員給客戶講解產品設計。產品建模時期UI設計師要了解客戶的要求想法和產品設計人員對產品功能的要求深入了解產品，採集用戶的使用需求、使用環境和使用習慣，了解市場同類產品的設計分析它們的優缺點。協助產品設計人員完成產品建模過程並製作產品展示demo模擬用戶對主要功能的操作過程和界面呈現，生成交互原型(基本上產品的交互性和易用性問題都需要在產品建模的時期解決)。如果時間允許我們甚至可以提出一份「UI設計分析報告」，這份報告可以附在產品設計說明後，更有效的幫助客戶了解我們的產品設計並且幫助開發人員更好的遵循UI的整體要求來完成開發工作。這個時期的關鍵是「交互設計」。 二.技術建模時期:在這個時期作為UI設計師我們已經了解了軟體產品的功能需求並且拿到了一份產品設計人員的產品設計說明，可以進入界面樣式的設計過程了。這個時候我們應該考慮更多的應該是產品的整體風格和界面的設計，通常我們也會做出幾份方案給客戶選擇。有些客戶會要求產品遵循一個整體的VI設計標准，那麼我們就需要按照一個整體的已定的風格去設計軟體的界面，要與客戶公司的企業形象吻合。在這個時期軟體的UI設計進入到了美術設計階段，我們需要制定整個軟體的風格，塑造軟體的整體形象，並且具體的描述每一個界面中的元素和布局、文字字體等信息。在這個階段我也不應過多的說什麼，主要是每個UI設計師各自發揮你們的藝術專長用最簡潔、最漂亮的界面表現軟體產品。需要注意的就是在我們設計整體風格的時候一定要深入了解這個產品的理念，看看它是干什麼用的。不同的產品要有不同的風格，這里邊有很多的細節注意，不同的產品、同類的產品不同的內容、不同的傳播介質，這些都會決定UI設計的風格。 1.不同的產品:比如一個游戲產品就需要將界面做的花哨一些或者用大的圖片充斥;如果要是一個應用軟體就需要突出使用方便和強大的功能設計要簡潔。 2.同類不同的內容:比如一個可愛的游戲產品(像是卡通類游戲)就需要將界面做的活潑生動可愛一點;如果是一個角色扮演的戰斗類游戲(像是槍戰闖關類游戲)就要做的酷一點深沉一些。 3.不同的傳播介質:我們要做的軟體產品有的需要在網路上傳播那麼就需要我們考慮到網路速度的問題;有的就是利用光碟當作介質那麼這樣的軟體就可以做一些比較花哨的效果。所以說不同的產品還需要單獨考慮，這也需要UI設計師多多了解產品，保持與客戶交流。還需要重點注意的就是我們在做圖形化設計的過程中千萬要貫徹在前一個階段做好的交互設計，始終注意產品的交互性和易用性。在設計過程中我們一定要做出每種結構每一個步驟的效果圖，不能只提供圖標、按鈕、背景圖等圖片，這樣的話程序員根本不知道往那放這些東西，在這個時期我們就要最終確定軟體界面的呈現形式。技術建模一般是由高級程序員完成的，他們會將整個軟體開發分為一個一個功能模塊，分配給一個一個的開發小組。但是這些負責技術建模的高級程序員考慮更多的往往是如何將整個設計用代碼實現、怎麼才能更有效的復用以前已有的模塊等等，而不是軟體是什麼模樣會有什麼樣的風格，所以作為UI設計師我們必須主動出擊，多多和他們交流以保證我們的想法能夠完整的實現，如果有技術實現的問題我們還要及時做出修改。有時候我們還需要根據客戶或者產品的特定需求做一些延伸性的設計(也叫UI產品設計的外延)，包括:軟體的安裝導航界面、產品的演示宣傳動畫、一些附帶的桌面壁紙或者屏幕保護、代表軟體的卡通小精靈、有時還會被要求設計軟體的logo和廣告banner等等。技術建模時期的關鍵是「風格和界面設計」。 三.分模塊開發時期:這個時期軟體開發過程進入實現階段，也是需要人力最多的時期，這樣就會分散UI設計師的精力。軟體會被切分為若干個小的模塊進行代碼編寫，最後整合成一個完整的軟體產品。對於一個程序員來講他們大多根本不會考慮到產品應該是什麼樣子應該有什麼整體風格，他們所考慮的只是如何用代碼實現設計的要求，而且在現在的軟體企業多都實現了模塊的復用，這樣會大大節約人力成本，那麼程序員只是對原有模板進行修改使之適應新的軟體產品，這樣就會對UI設計的最終貫徹和實現帶來很大的麻煩。做出的每一個模塊雖然已經能夠使用但是都是「各自為政」沒有統一，因此我們也需要主動的協助和監督程序員完整的實現UI設計的要求，如果有技術無法實現的問題需要及時溝通改正設計方案。有的時候有些模塊需要有單獨的風格，比如一些已有的軟體產品需要集合到某一個新的產品中去，這樣就會加大了設計師的設計難度，我們必須要在保證產品整體風格不變的情況下將原有產品的設計風格集合進去，使之更加適合新的產品表現形式。如果我們仍舊保持原有產品的風格那麼當各個模塊集合起來之後往往會使新的產品感覺很鬆散，進入每一個功能都會覺得是另外一個軟體，使人對軟體的印象不深刻。在這個階段我們還是要主動一些，跟進各個模塊界面的實現。現在很多軟體企業都存在很多UI設計師和程序員的協作問題，不是程序員做不到UI設計的要求，就是UI設計師堅持一些自己的想法不能改動，還有的時候經常會有人過來沒頭沒尾的說幫我做點東西吧!當軟體集成到一起再一看，就是很多不同風格的東西堆砌到一起，從頭到尾都不舒服，領導或者客戶看了以後極度不滿狂批一陣，最後得出結果UI設計做的不到位。 有人說UI設計師就要背著軟體不成功的黑鍋，因為人們根本看不見代碼怎麼寫的，功能是怎麼實現的，他們只知道對軟體的樣子和使用進行。讓一個用戶一個軟體他們只會說這個軟體好用看上去也不錯挺漂亮的，但是做為一個普通用戶決不會有人說這個軟體程序寫的不錯。這么一看我們會聯想到現在軟體開發之中主要的沖突在UI設計師和程序員之間，其實這只是表面的表現形式。實質上這個現象體現了現在軟體企業的一個通病就是這個開發組之間的協作關系混亂，程序員和UI設計師之間是平級協作關系，程序員是不會對產品負責的，這樣看來UI設計師只應該聽項目經理的，無論對設計做什麼樣的改動或者增添什麼樣的東西，都應該由開發項目經理和產品經理協商之後決定，只有他們可以對最終的產品負責。這樣也可以避免很多程序員和UI設計師之間的爭執和矛盾。但是現在大多說軟體企業的產品經理和開發項目經理沒有做到這一點，他們也根本不了解UI設計師和程序員的工作，也無法把握他們的工作量，這樣無序的管理會造成很麻煩的後果。其實可以建立一些合理的流程管理制度，就算企業沒有作為UI設計師也可以自己起草一份適合自己和企業的「UI設計需求申請單」，里邊應該列出我們需要的「輸入」內容、工作時間、最終的「輸出」結果等等欄目(可以自己根據要求靈活決定)。這樣形成一個有參與人、有依據、有存底的工作流程，出現問題或者爭執的時候我們有據可依，這只是一個習慣性的東西因不同的企業而議不一定都要建立需求單。在分模塊開發時期UI設計師應該做的是，在模塊開發的前期做出產品每個模塊的效果demo(可以用圖片的形式表現)要求程序員按照demo的樣式進行模塊開發，協助和監督程序員嚴格按照UI設計要求生成最終產品，把握各個模塊的統一，經常了解程序員的工作進展及時對不合理或者難以實現的設計進行討論設計出新的方案。分模塊開發時期的關鍵是「協助和監督程序員生成最終產品」。 四.測試時期的輸入和輸出: 軟體產品的測試會分為三個測試階段，第一個是分模塊開發完成之後每一個模塊進行的單元測試;第二個是將各個單元集成為一個整體的產品進行集成測試;第三個就是整個產品在交付使用前進行的整體測試。在測試過程中UI設計師的任務相對會輕松一些，我們只需要跟著測試人員走幾遍流程，如果在其中發現沒有按照UI設計要求的部分及時要求改正就好了。 我們還會經常遇到客戶在測試過程中突然覺得那裡不合適需要修改，這也是最最頭疼的事情了，有的時候他們說的並不一定對，只要我們設計的每一個步驟都有一定的道理能夠說服他們就一切ok了。如果他們執意要修改設計方案，那麼我們沒辦法只能按照客戶需求修改。但是如果前邊按照本文的流程走下來我想這樣的可能性不大就算是修改也不會是大動干戈。在修改過程中我們還是需要先做出效果圖，讓客戶確定再具體實施，這樣也會避免很多麻煩的。測試時期的關鍵是「檢查整個產品發現問題及時改正」。如今軟體的越來越多的考慮到人的因素，「以人為本」的設計理念貫穿了整個軟體產品開發的始終，因此軟體產品的UI設計過程最重要的兩個部分就是行為和構造，也就是交互設計和界面設計。上面我們按照軟體開發的四個階段，逐個的分析了每個時期UI設計的任務。由此我們可以看出UI設計並不完全是一個美術設計的過程，還有很重要的一個部分就是交互性和易用性的設計。我們要時刻把自己放在軟體的用戶角度來考慮，設計出最簡單易用，界面友好的軟體產品。 善於使用繼承，讓美工團隊去設計窗體的界面，程序團隊只去實現窗體功能。來源:網路更多

6、七個網頁界面ui設計細節你掌握了嗎

素馬主張任何高大上的產品概念設計最終落地都化解為版式與圖片。隨著用戶對產品使用的體驗要求越來越高，新銳的版式加上精美的圖片，還需要加上獨特的動效設計（前端製作工藝）才行。那麼，除了網頁設計三大塊版式、圖片、動效外，我們這些看似搬磚，每天做細節設計的ui設計師，是否有大的研究和作為呢。今天分享的這篇文章，主要是針對ui界面中非常細小的設計技巧進行講解。

01

-

使用色彩和字重來創造層次結構，而不是單純的大小對比

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過於過度依賴字體大小差異來營造對比。

「這段文字重要嗎？那麼讓它更大一些吧。」

「這段文字是比較次要嗎？那麼讓它變小一點吧。」

單純使用字體大小對比，所營造的對比並不夠，嘗試結合色彩和字重來營造更好的對比效果。

「這段文字重要嗎？我們讓它色彩更加大膽一些吧。」

「這段文字是比較次要嗎？我們讓它的色彩更淺一些吧。」

如果可以的話，你甚至可以採用兩到三種顏色：

・主要內容採用深色（諸如標題，但是不要用純黑）

・次要內容採用灰色（比如文章發表日期）

・輔助性內容採用淺灰色（比如頁腳中的版權聲明）

類似的，在UI設計的時候，通常兩種不同的字重足以營造出優秀的層次感：

・大多數的文本採用正常的字重（400到500，具體取決於字體）

・對於需要強調的文字採用較重的字重（600到700，具體取決於字體）

應當盡量不要讓正文部分字重低於400，因為這一部分字體本身尺寸已經較小，低於400會使得可讀性不佳。如果你依然需要降低字重，那麼不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

02

-

不要在有色背景上使用灰色的文本

在白色背景下，將黑色的文本改成灰色，是不錯的淡化其視覺效果的做法，但是在彩色背景下這么做，則是另外一回事。

實際上，讓白色背景下文本由黑變灰實際上是達到降低對比度的效果。

但是在彩色背景下，想要降低對比度是應該讓文本逐步接近背景色，而不是改為灰色。

想要降低和背景色之間的對比，通常有兩種方法：

1、降低白色文本的不透明度

降低不透明度，能夠讓背景的顏色透過來一些，以一種不沖突的方式降低前景文字和背景之間的對比度。

2、基於背景色手工挑選文本的顏色

當背景是圖像或者圖案的時候，半透明的文本會影響可讀性，這個時候最好是基於背景主色調來挑選相應的文本色。

03

-

陰影設計

相比於採用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特徵，光線從上往下照下來所營造的陰影效果。

如果你對此有興趣，Material Design Guideline 非常清晰地給你講明白了這樣的陰影的製作細節。

04

-

盡量少使用 Borders

盒子模型是網頁前端最常用到的工具。當你需要在兩個元素之間創建分隔的時候，盡量避免使用兩者的邊界直接接觸。

雖然 Border 是分隔兩個元素的好辦法，但是它不是唯一的方法，使用過多會讓整個布局的設計感降低，甚至會造成混亂。

所以你可以嘗試下面的辦法來規避：

1、使用 box shadow

box shadow 同樣可以營造出邊界感，而且更加微妙，並不會顯得突兀，不會分散用戶的注意力。

2、使用不同的背景色來區分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區分。所以，你所需要做的就是在不同的區塊採用不同的背景色，並且嘗試刪除邊框，因為你根本不需要它。

3、增加額外的留白

創建元素之間的分離效果，並不一定要通過線框來表現，只要增加留白，讓它們分隔開就行了。通過留白和間距來實現元素分組是UI設計中的常用手法。

05

-

不要讓小圖標無端地放大

當你在設計著陸頁的時候，可能會突出產品的功能，這個時候你需要一些大圖標來作為視覺錨點，這個時候你可能會去 Font Awesome 或者 Zondicons 這樣的網站找幾個免費的矢量圖標，然後放大到符合你需求的尺寸。

它們都是矢量圖標，照說是可以無損放大的。但是一個通常只有16×16 的圖標放大三四倍，它固然無損，但是在視覺上就顯得頗為不專業了：缺乏細節，總感覺過於矮胖。

可是，如果這些小圖標是你唯一能夠搞得到的素材的話，那麼不妨試著將它置於另外一個帶有顏色的圖形當中：

這樣的設計不僅能夠讓圖標達到預期的視覺體積，而且看起來要比單純放大，看起來細節會更多一些。當然，如果你手頭不是那麼緊的話，最好還是買幾個大尺寸的高素質圖標，比如 Heroicons 或 Iconic。

06

-

增加帶有顏色的單邊邊框提升個性

當然，你可能並不是一個對於平面設計有著足夠經驗的設計師，但是依然可以讓你設計的界面有足夠的視覺吸引力。

最簡單的方法，就是在界面的邊框中的一邊添加上單色甚至漸變的邊框，這能讓平淡無奇的界面一下子變得鮮活起來。

比如在警告彈出框的側面：

或者在導航欄的底部，以示觸發：

或者在整個頁面的頂部：

這並不需要什麼平面設計的經驗，但是會明顯強化設計感。

退一萬步講，你不知道選取什麼顏色，簡單，上Dribbble 的色彩搜索中隨便找幾個看著漂亮的顏色，其實也就夠用了。

07

-

並非每個按鈕都需要顏色

很多時候，按鈕本身所處的語境和按鈕上的文本內容會讓人感到迷惑。像BootStrap 這樣的框架就讓設計師按照語境和語義來進行選擇：

「這是一個積極的操作？讓這個按鈕是綠色的吧。」

「這是否是要刪除數據？那麼將按鈕設置為紅色的吧。」

的確，語義和按鈕本身的設計息息相關，但是還有更重要的維度被忽略了，那就是層次結構。

網頁上每個操作其實都位於整個交互金字塔的某個位置。絕大多數的頁面其實只有一個主要操作，搭配一些不太重要的次要操作，以及為數不多的幾個三級操作。

在設計這些交互的時候，通過層次結構來呈現這些交互的重要性是很重要的設計環節。

・主要操作應該很明顯。採用實色、高對比度的按鈕是很有必要的。

・次要操作應該明顯，但是不突出，採用幽靈按鈕或者和背景對比度較低的色彩是比較合理的。

・三級操作應該是可被發現，但是不明顯的，他們最好被設計為鏈接。

「破壞性的交互所涉及的按鈕難道不應該是紅色的么？」

沒必要！如果破壞性的交互所涉及到的按鈕不是主要操作的話，讓它按照次要操作甚至三級操作的按鈕來設計就好了。

如果這樣的操作是主要操作的話，可以讓它是大號的、紅色的帶有加粗文本的按鈕：

小結

-

以上總結的七個ui界面設計小細節處理技巧，都是大量的項目實戰工作中總結出來的，容易理解也容易執行。有人可能說，連一個像素都在磕，又不是搞科學研究火箭發射，有必要嗎？我只能說，這是一個工作的專業度問題和態度問題。也許一像素並不影響ui界面的美觀問題，但是卻是一位大師和普通工人的區別。

7、國外有哪些好的ui設計網站 知乎

　10個國外較優秀的UI設計網站。作為設計師，除了要有龐大的素材庫，要保持高度的行業敏銳度，得到第一手行業資訊，還要不斷地學習充電。通過它們，你就能每天收到設計行業最新的相關資訊，包括行業動態、設計作品、創意靈感以及素材等等。

1、UIparade:靈感UI設計目錄網
UIparade:靈感UI設計目錄網是一個致力於設計師UI設計作品分享的網站，提供世界是最有才華的設計師們的優秀作品，幫助設計師們獲得UI方面的設計靈感，提供豐富的設計參考案例，同時還提供收費版的在線設計工具。

2、MaterialUp:創意UI設計靈感分享網
MaterialUp:創意UI設計靈感分享網是一個致力於移動應用和網站程序、概念設計作品展示的網站，每周都會更新最新收錄的創意設計，幫助設計師們尋找極富靈感思維的設計作品，設計沒思路？沒靈感？那麼你就趕緊訂閱這個網站吧。

3、HudsandGuis:科幻UI界面分享博客
HudsandGuis:科幻UI界面分享博客是一個致力於分享電影里的科幻類UI界面設計的站點，我們都看過鋼鐵俠系列的電影，對於裡面的帶有濃厚未來科技理念的UI界面設計有著強烈的視覺沖突，該博客就是分享此類的UI界面設計資源。科技UI界面是從國外的科幻電影里衍生出來的新設計理念，這樣的UI設計擁有超前的想像力和極簡的設計元素，是提醒未來科技發展的最佳創意思維，越來越多的科幻電影採用了這樣的視覺展示資源，讓電影里的未來氣息更加濃厚，如果你喜歡此類UI設計的話，不妨多關注這個博客網站，你會收到到很多超酷的UI資源。

4、Mantia:蘋果UI設計網
mantia.me是一個蘋果手機UI設計站點，網站提供免費的icon圖片和桌面以及UI設計下載和使用。網站作者曾經是iTunes團隊人之一，參與了iTunes圖標的設計。

5、Android Design:安卓UI設計網
安卓系統的UI界面總比不上IOS的優秀和炫麗，很多手機控對安卓的UI一直建議非常多，這不穀歌Android團隊也看不下去了，終於宣布推出安卓UI指導性質的網站:Android Design:安卓UI設計網。該網站上有很多資料，其中包括一般風格指南、設計樣式，以及Android的部分默認UI 構件 — 「Building Blocks」。網站還重點介紹了Android 4.0中用戶界面元素，有些新特徵在老版本中可能不能立即得到支持。但就長遠來說，這是一個不錯的改變。

6、FluiDui:智能手機UI設計測試平台
　 FluiDui:智能手機UI設計測試平台是一個針對於蘋果手機和安卓手機系統UI設計的網站，可以在線通過谷歌瀏覽器試用Fluid UI，進行一些換膚、位置、圖標等測試。蘋果手機和安卓手機的流行也為手機系統的UI設計添加了一把火，想這樣的可以在線通過瀏覽器來調試系統UI的網站少之又少，如果你是手機系統UI的設計師，那麼這個網站絕對要去試試了，不過需要注冊以後才可以試用，登錄後有非常豐富的圖標、套圖、模版可以在線測試的。

7、LovelyUI:可愛的UI手機界面設計庫
LovelyUI:可愛的UI手機界面設計庫是一個致力於智能手機界面設計作品展示的博客網站，由眾多程序界面設計師上傳分享出來的，該網站分類詳細，用戶可以更加分類來查看不同的界面UI設計。手機系統的界面UI就跟大廚做菜一樣，你的菜譜要征服用戶的胃，應用程序界面也需要吸引用戶的眼球才能讓一個應用程序有良好的用戶體驗，要想提高自己的設計能力就需要去取經，該網站就是你取經的必備網站之一。

8、GetUIcolors:在線UI顏色分享網
GetUIcolors:在線UI顏色分享網是一個幫助設計師發現最佳顏色搭配的網站，當你在設計UI素材的時候合理的顏色搭配就顯得非常重要，該網站把搭配好的顏色整合在一起供設計師使用，直接復制即可。

9、UI Cloud:UI設計素材雲搜索引擎
UI Cloud:UI設計素材雲搜索引擎是一個針對UI設計素材搜索的網站，通過關鍵字搜索你所需要的素材，並且下載是完全免費的，漂亮的網站UI設計加上優秀的素材下載資源，絕對是你找素材的好應用。
UICloud平台收集了來自世界各地的互聯網上最好的UI元素設計作品，並提供了一個搜索引擎為你找到所需要的最好的UI素材。
該平台的目標是要創造最大的平台，展示其頂級的用戶界面設計，並為開發人員輕鬆快速地創建項目，輔助其獲取得到最好的UI素材。目前已收錄超過22444個UI作品。

10、Fltdsgn:平板UI設計分享網
Fltdsgn:平板UI設計分享網是一個提供平板APP和html5網站模版UI作品展示的網站，幫助設計師們尋找靈感，激發你的創意思維，支持郵箱訂閱最新更新，每天都可以讓你找到創意模版設計資源。在該網站你除了可以尋找合適的UI外，還可以提交自己的設計作品，該網站收錄的創意作品，除了有截圖還會發布作品設計來源，也可以作為宣傳自己團隊的平台來使用。

8、UI設計理念：優秀的界面設計是如何誕生的

一個好的交互設計對產品的成功起著很關鍵的作用。UI所做的就是用戶最先接觸到的東西，也是一般性的用戶唯一接觸到的東西。用戶對於界面視覺效果和軟體操作方式的易用性的關心，要遠遠大於他對底層到底用什麼樣的代碼去實現的關心。如果說程序是一個人的肌肉和骨骼，那麼UI設計就是人的外貌和品格！都是一個成功軟體產品必不可少的重要組成部分！對我而言程序懂得不多所以只是從UI設計與軟體產品整體的關系和如何才能使軟體產品得到最佳的UI設計角度來談。現在我們的軟體產品存在的一些問題有技術方面的問題，但是更多的問題來源於各個部門、各個項目小組的之間的配合。我們現有的開發流程一般都是由市場部門提出客戶需求，產品設計人員提出產品設計報告，開發部門設計開發計劃，由各個小組分別開發一個模塊，最後整合成為一個完整的軟體產品。在這些流程之間UI設計應該參與那一個部分，每一個部分應該做到什麼地步才可以使產品得到最好的UI設計效果呢？下面我們會在每一個部分具體分析。首先分析一下現在的問題所在，在一些軟體業比較發達的國家軟體產品的UI設計過程貫穿了軟體開發的自始至終，而且是必不可少的。而在中國產品UI設計並沒有被廣泛接受，就算是已經有了UI設計師的一些企業也沒有對產品的UI有著足夠的重視，一般來講他們大都會把重點放在如何使用代碼實現所需要的功能，在我看來這只是一個成功軟體產品的一個部分。一個優秀軟體產品的開發過程應該是由四個部分組成： 1.軟體產品的設計（業務建模） 2.系統的設計（技術建模） 3.分單元的開發（把軟體各個部分拆分分單元編寫代碼） 4.測試（分為單元測試、系統集成測試和產品功能測試），這些是由軟體研發部門做的工作。 除去以上軟體開發過程的四個部分還有用戶需求和用戶驗收測試，這兩個過程是由市場部門和產品用戶一起完成。所以說用代碼實現產品功能（coding過程）只是軟體開發的一個步驟。現在我們回到UI設計的角度來看，作為UI設計人員我們需要全程參與到軟體開發過程中，而不只是在某一個步驟參與，現在在大多數軟體企業里UI設計師只是在產品的coding過程的時候才實質性的參與到軟體開發過程里，而在其它幾個步驟里只是參加甚至根本沒有參加（在這里我要強調「參與」和「參加」是兩個詞的不同概念，「參與」指的是完全加入到開發行列開始進入設計階段，而「參加」指的只是旁聽會議或者提出一些簡單的意見並沒有開始進入設計階段），這樣就會大大降低軟體產品的開發效率使開發成本成倍上升甚至導致整個產品的不成功！這並不是危言聳聽，下面我們分析一下在一個軟體產品的開發過程中UI設計應該怎麼做、做到什麼地步才能避免上邊提到的那些問題？下面我會根據軟體開發的過程解釋上邊的問題，剛才我提過軟體開發過程的幾個步驟： 1.產品建模 2.技術建模 3.分模塊開發 4.測試，那麼我們也分為這四個部分進行討論：一.產品建模時期：我們首先來了解一下「輸入」和「輸出」，在UI設計里是很重要的兩個概念，經常會有人過來對我說「我們有一個軟體產品需要美化一下」然後再也沒有什麼深入的解釋了，僅僅這句話我的工作就要開始了，然而這個軟體是給誰用的？是干什麼的？我們卻一無所知！成功的UI設計首先要有完整的「輸入」，怎麼才能叫做完整的「輸入」呢？也就需要UI設計師從整個軟體產品的策劃階段就開始介入，在產品用戶（也就是客戶）向市場部門或者產品部門提出產品需求的時候就要開始參與到產品策劃開發過程中來，這一部分對於UI設計師而言就是第一個輸入階段，並且在這個階段里UI設計師也需要提出一些對產品交互設計的意見，以便產品部門在做產品設計的時候更多的考慮到產品的交互性和功能的簡單表現原則，有很多軟體在設計階段就被加入了許多並不是用的附加功能，其實一個好的軟體設計就是要用最簡單的結構實現用戶的想法，一些可有可無的功能看上去很花哨往往會影響用戶的判斷能力，這些就是產品優化的一些概念了。在此我需要簡單的提一下如果想要深入研究可以看一些有關於產品優化的書籍甚至是心理學的書籍，有很多人認為軟體的優化就是代碼的優化（用最少的代碼實現產品功能），在我看來這只是程序的優化是針對程序員而言的而不是整個軟體產品的優化，產品優化包含了交互設計在現在的多數軟體企業沒有專門做這一部分的交互設計師所以往往這一部分被忽略，我認為這一部分應該又UI設計師承擔起來，從文章的開頭我就說過UI設計不只是圖形界面的設計，就算是有企業里邊有這樣的優化人員或者交互設計師他們也要和UI設計師一起配合完成產品交互設計，作為UI設計師產品的交互性和易用性是在做設計的時候必須考慮的！言歸正傳，產品設計人員經常不會過多考慮簡單易用原理也就是產品出來用什麼樣的組合形式體現給用戶，這也是UI設計師考慮最多的事情，所以UI設計師一定要在產品建模期間參與設計，給產品設計師一些意見。作為一名優秀的UI設計師我們還要在了解了產品的需求之後更深入了解這個產品的使用環境和用戶群體的使用習慣。我們還需要了解市場上的同類軟體產品的設計方案，研究他們的優缺點，以便在我們設計的時候吸取它們的長處避免它們的錯誤。在產品建模之後一般的都會由產品設計人員給客戶做一次功能設計講解，往往這樣的講解只是文字性質的需要讓客戶想像著理解，這就會造成很大的隱患有的客戶根本無法理解你的講解甚至對這樣的講解根本不認真聽，因為他們根本不懂，在討論過程中他們經常會同意產品設計人員的一切設計想法但是產品測試的時候他們又會提出種種不滿意，我想這是一般的軟體公司都會遇到的也是最最頭疼的事情，但這並不能怪客戶我說過客戶只會關心視覺效果和軟體的操作而並不會去關心我們是怎麼實現這一切的。這種情況帶來的直接後果就是產品的反復修改開發成本成倍上升，怎麼避免呢？這就要靠UI設計師了，俗話說「眼見為實，耳聽為虛」，所以需要UI設計師做出一個產品整體效果的demo。這個demo用圖片的形式表現就可以，我們只需要將要體現的產品界面做一個拼湊就可以了，因為這並不是產品的最後樣子，只是協助產品設計人員給客戶講解產品設計。產品建模時期UI設計師要了解客戶的要求想法和產品設計人員對產品功能的要求深入了解產品，採集用戶的使用需求、使用環境和使用習慣，了解市場同類產品的設計分析它們的優缺點。協助產品設計人員完成產品建模過程並製作產品展示demo模擬用戶對主要功能的操作過程和界面呈現，生成交互原型（基本上產品的交互性和易用性問題都需要在產品建模的時期解決）。如果時間允許我們甚至可以提出一份「UI設計分析報告」，這份報告可以附在產品設計說明後，更有效的幫助客戶了解我們的產品設計並且幫助開發人員更好的遵循UI的整體要求來完成開發工作。這個時期的關鍵是「交互設計」。 二.技術建模時期：在這個時期作為UI設計師我們已經了解了軟體產品的功能需求並且拿到了一份產品設計人員的產品設計說明，可以進入界面樣式的設計過程了。這個時候我們應該考慮更多的應該是產品的整體風格和界面的設計，通常我們也會做出幾份方案給客戶選擇。有些客戶會要求產品遵循一個整體的VI設計標准，那麼我們就需要按照一個整體的已定的風格去設計軟體的界面，要與客戶公司的企業形象吻合。在這個時期軟體的UI設計進入到了美術設計階段，我們需要制定整個軟體的風格，塑造軟體的整體形象，並且具體的描述每一個界面中的元素和布局、文字字體等信息。在這個階段我也不應過多的說什麼，主要是每個UI設計師各自發揮你們的藝術專長用最簡潔、最漂亮的界面表現軟體產品。需要注意的就是在我們設計整體風格的時候一定要深入了解這個產品的理念，看看它是干什麼用的。不同的產品要有不同的風格，這里邊有很多的細節注意，不同的產品、同類的產品不同的內容、不同的傳播介質，這些都會決定UI設計的風格。 1.不同的產品：比如一個游戲產品就需要將界面做的花哨一些或者用大的圖片充斥；如果要是一個應用軟體就需要突出使用方便和強大的功能設計要簡潔。 2.同類不同的內容：比如一個可愛的游戲產品（像是卡通類游戲）就需要將界面做的活潑生動可愛一點；如果是一個角色扮演的戰斗類游戲（像是槍戰闖關類游戲）就要做的酷一點深沉一些。 3.不同的傳播介質：我們要做的軟體產品有的需要在網路上傳播那麼就需要我們考慮到網路速度的問題；有的就是利用光碟當作介質那麼這樣的軟體就可以做一些比較花哨的效果。所以說不同的產品還需要單獨考慮，這也需要UI設計師多多了解產品，保持與客戶交流。還需要重點注意的就是我們在做圖形化設計的過程中千萬要貫徹在前一個階段做好的交互設計，始終注意產品的交互性和易用性。在設計過程中我們一定要做出每種結構每一個步驟的效果圖，不能只提供圖標、按鈕、背景圖等圖片，這樣的話程序員根本不知道往那放這些東西，在這個時期我們就要最終確定軟體界面的呈現形式。技術建模一般是由高級程序員完成的，他們會將整個軟體開發分為一個一個功能模塊，分配給一個一個的開發小組。但是這些負責技術建模的高級程序員考慮更多的往往是如何將整個設計用代碼實現、怎麼才能更有效的復用以前已有的模塊等等，而不是軟體是什麼模樣會有什麼樣的風格，所以作為UI設計師我們必須主動出擊，多多和他們交流以保證我們的想法能夠完整的實現，如果有技術實現的問題我們還要及時做出修改。有時候我們還需要根據客戶或者產品的特定需求做一些延伸性的設計（也叫UI產品設計的外延），包括：軟體的安裝導航界面、產品的演示宣傳動畫、一些附帶的桌面壁紙或者屏幕保護、代表軟體的卡通小精靈、有時還會被要求設計軟體的logo和廣告banner等等。技術建模時期的關鍵是「風格和界面設計」。 三.分模塊開發時期：這個時期軟體開發過程進入實現階段，也是需要人力最多的時期，這樣就會分散UI設計師的精力。軟體會被切分為若干個小的模塊進行代碼編寫，最後整合成一個完整的軟體產品。對於一個程序員來講他們大多根本不會考慮到產品應該是什麼樣子應該有什麼整體風格，他們所考慮的只是如何用代碼實現設計的要求，而且在現在的軟體企業多都實現了模塊的復用，這樣會大大節約人力成本，那麼程序員只是對原有模板進行修改使之適應新的軟體產品，這樣就會對UI設計的最終貫徹和實現帶來很大的麻煩。做出的每一個模塊雖然已經能夠使用但是都是「各自為政」沒有統一，因此我們也需要主動的協助和監督程序員完整的實現UI設計的要求，如果有技術無法實現的問題需要及時溝通改正設計方案。有的時候有些模塊需要有單獨的風格，比如一些已有的軟體產品需要集合到某一個新的產品中去，這樣就會加大了設計師的設計難度，我們必須要在保證產品整體風格不變的情況下將原有產品的設計風格集合進去，使之更加適合新的產品表現形式。如果我們仍舊保持原有產品的風格那麼當各個模塊集合起來之後往往會使新的產品感覺很鬆散，進入每一個功能都會覺得是另外一個軟體，使人對軟體的印象不深刻。在這個階段我們還是要主動一些，跟進各個模塊界面的實現。現在很多軟體企業都存在很多UI設計師和程序員的協作問題，不是程序員做不到UI設計的要求，就是UI設計師堅持一些自己的想法不能改動，還有的時候經常會有人過來沒頭沒尾的說幫我做點東西吧！當軟體集成到一起再一看，就是很多不同風格的東西堆砌到一起，從頭到尾都不舒服，領導或者客戶看了以後極度不滿狂批一陣，最後得出結果UI設計做的不到位。有人說UI設計師就要背著軟體不成功的黑鍋，因為人們根本看不見代碼怎麼寫的，功能是怎麼實現的，他們只知道對軟體的樣子和使用進行評論。讓一個用戶評論一個軟體他們只會說這個軟體好用看上去也不錯挺漂亮的，但是做為一個普通用戶決不會有人說這個軟體程序寫的不錯。這么一看我們會聯想到現在軟體開發之中主要的沖突在UI設計師和程序員之間，其實這只是表面的表現形式。實質上這個現象體現了現在軟體企業的一個通病就是這個開發組之間的協作關系混亂，程序員和UI設計師之間是平級協作關系，程序員是不會對產品負責的，這樣看來UI設計師只應該聽項目經理的，無論對設計做什麼樣的改動或者增添什麼樣的東西，都應該由開發項目經理和產品經理協商之後決定，只有他們可以對最終的產品負責。這樣也可以避免很多程序員和UI設計師之間的爭執和矛盾。但是現在大多說軟體企業的產品經理和開發項目經理沒有做到這一點，他們也根本不了解UI設計師和程序員的工作，也無法把握他們的工作量，這樣無序的管理會造成很麻煩的後果。其實可以建立一些合理的流程管理制度，就算企業沒有作為UI設計師也可以自己起草一份適合自己和企業的「UI設計需求申請單」，里邊應該列出我們需要的「輸入」內容、工作時間、最終的「輸出」結果等等欄目（可以自己根據要求靈活決定）。這樣形成一個有參與人、有依據、有存底的工作流程，出現問題或者爭執的時候我們有據可依，這只是一個習慣性的東西因不同的企業而議不一定都要建立需求單。在分模塊開發時期UI設計師應該做的是，在模塊開發的前期做出產品每個模塊的效果demo（可以用圖片的形式表現）要求程序員按照demo的樣式進行模塊開發，協助和監督程序員嚴格按照UI設計要求生成最終產品，把握各個模塊的統一，經常了解程序員的工作進展及時對不合理或者難以實現的設計進行討論設計出新的方案。分模塊開發時期的關鍵是「協助和監督程序員生成最終產品」。 四.測試時期的輸入和輸出： 軟體產品的測試會分為三個測試階段，第一個是分模塊開發完成之後每一個模塊進行的單元測試；第二個是將各個單元集成為一個整體的產品進行集成測試；第三個就是整個產品在交付使用前進行的整體測試。在測試過程中UI設計師的任務相對會輕松一些，我們只需要跟著測試人員走幾遍流程，如果在其中發現沒有按照UI設計要求的部分及時要求改正就好了。我們還會經常遇到客戶在測試過程中突然覺得那裡不合適需要修改，這也是最最頭疼的事情了，有的時候他們說的並不一定對，只要我們設計的每一個步驟都有一定的道理能夠說服他們就一切ok了。如果他們執意要修改設計方案，那麼我們沒辦法只能按照客戶需求修改。但是如果前邊按照本文的流程走下來我想這樣的可能性不大就算是修改也不會是大動干戈。在修改過程中我們還是需要先做出效果圖，讓客戶確定再具體實施，這樣也會避免很多麻煩的。測試時期的關鍵是「檢查整個產品發現問題及時改正」。如今軟體的越來越多的考慮到人的因素，「以人為本」的設計理念貫穿了整個軟體產品開發的始終，因此軟體產品的UI設計過程最重要的兩個部分就是行為和構造，也就是交互設計和界面設計。上面我們按照軟體開發的四個階段，逐個的分析了每個時期UI設計的任務。由此我們可以看出UI設計並不完全是一個美術設計的過程，還有很重要的一個部分就是交互性和易用性的設計。我們要時刻把自己放在軟體的用戶角度來考慮，設計出最簡單易用，界面友好的軟體產品。善於使用繼承，讓美工團隊去設計窗體的界面，程序團隊只去實現窗體功能。來源：網路更多