網站界面ui設計題庫

1、七個網頁界面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界面的美觀問題，但是卻是一位大師和普通工人的區別。

2、UI設計，這幾個網站就夠了

網頁製作可以大體上分成四個工種：
1 美工
美工的主要任務是設計。了解用戶的意圖，分析網站配色，基本布局。繪制出一個網站效果圖。
美工需要掌握的知識體系應該包括網頁設計，UI（User Interface）用戶界面人機交互、操作邏輯、界面美觀的整體設計，UED（user experience design）用戶體驗設計--簡單來說就是如何使得網站更加便於交互。
2 前端開發
美工在完成設計效果圖之後，由前端開發人員將其製作成為適合瀏覽器查看的HTML頁面。
由於現在移動互聯網的大規模流行，加上各個不同廠商的瀏覽器的激烈競爭，前端開發的主要任務簡單來說就是使網頁在不同瀏覽器不同解析度不同設備上提供相似或相近的瀏覽體驗。
前端開發需要掌握的知識體系主要是兼容性問題的解決，流暢完美的交互體驗。具體到技術細節上就是HTML，CSS，JavaScript，各大公司各種不同內核的瀏覽器、各種各樣的JS庫、簡單的與後台交互的知識。
3 後台開發
前台開發完成之後，就是後台程序員的工作了，相比較前端來說，後台更像傳統意義上的程序員。後台的工作簡單來說就是網頁文件對資料庫的增刪改查。
後台需要掌握的知識體系應該包括，編程基礎，基本HTML語言，至少一門主流網頁語言（C#,C++,JAVA,PHP等），資料庫的操作等等。

4 宣傳推廣
前三個步驟完成之後，網站一定要推廣，簡單說就是營銷。
營銷人員應該掌握的知識體系應該包括SEO,SEM,線上線下推廣，事件營銷，危機公關等等復雜的知識。我對這個部分涉獵不多，不多說了。

另外，大型網站通常會在這四個崗位之間設立經理或有的公司叫網頁架構師，經理主要是用來協調，溝通，領導這四個崗位。

至於四個崗位有多少人就完全取決於公司的網站的規模了，我自己在2000年的時候做網頁基本上是四個活一個人做，除此之外還兼公司網管，電腦維修，有一段時間還兼司機，命苦啊~~

3、有哪些可以參考的ui設計網站

網頁鏈接 阿里巴巴矢量圖標庫，這個是國人都在用的，缺點是圖標好壞參差不齊
網頁鏈接 熊貓圖標網，這個網站雖然是英文的，但是可以用中文輸入哦

4、ui設計面試問題及答案有哪些？

一、ui設計面試問題及答案——具體問題

例如，面試官會問，“在我們團隊的應用程序的設計和開發中，為什麼我們要有標準的命名約定?”這似乎是一個簡單的問題，但實際上，它甚至更空洞。建議從以下幾個方面來改善這一問題。

A. Self-view:後期修改文件和圖層更加方便，標准命名也更加專業。

B.團隊視角:如果命名不統一，後期的溝通會浪費很多時間，可能會導致文件丟失。任務轉換需要大量的學習成本和緩慢的進程。

C.開發視角:這是最重要的一點，可以大大節省程序開發的時間和成本，減少不必要的溝通和重復切割的可能性。

二、ui設計面試問題及答案——抽象的問題

當面試官問你:“你為什麼離開上一份工作?”這個問題更加抽象。看看你是否有自己的自由式。

答:Self-Perspective

我在上一個公司也學到了很多，但是因為我們在每個階段都接觸到新的事物和新環境，我們對這些事物有了新的理解，激發了更多的設計想法。

b公司的角度來看

從業務廣度來看，最後一家公司會長期維持現狀，晉升空間有限。因此，有必要離開以前的公司，走自己的設計道路。

以上便是關於ui設計面試問題及答案的介紹了，希望它能幫助我們開拓，並確定屬於我們自己的設計風格，這一點非常重要。如果您想了解更多關於ui設計的相關設計技巧及素材等，可以點擊本站的其他文章進行學習。

5、推薦幾個Ui設計網站，比如pc網站布局之類的網站。登錄界面扁平化設計之類的

站酷，視覺.me,紅動中國，花瓣，昵圖，ps聯盟都不錯，也應該多看看國外的創意

6、網站進行UI設計需要注意哪些問題？

你好！
一、清晰的界面往往會給用戶留下深刻印象模糊的網站界面，會很容易引起視覺疲勞。因此，UI第一要素就是建立清晰界面的思維，將其應用到實際開發之中去，這將會在很大程度上提高用戶體驗度。
二、遵從「簡潔但不簡單」的設計原則 好的網站UI設計，不僅具備清晰的界面，還要給用戶以簡潔的感覺。用戶的第一印象是非常重要的，簡潔的UI設計原則會讓用戶在最短的時間內找到自己想要的內容，提高了效率，很多建站公司都明白其中的道理，進行網站改版就是為了簡潔化。扁平化設計就是一個好的思路。
三、給用戶以熟悉的感覺 所謂的給用戶熟悉的感覺，是UI設計的要點，我們要在創新的基礎上周密考慮用戶的需求，不能讓他們感覺陌生，從而流失顧客，這樣對企業來說會是一個很大的損失。
四、和用戶交互，提升頁面響應速度 UI的最終目標是提升用戶體驗，所以我們較強和用戶的交互，了解用戶的需求，提升頁面響應速度，最大程度為用戶帶去便利和舒適的瀏覽體驗。
五、整體必須保持一致風格 網站整體要有一個同意的風格，這其中不僅包含了顏色的搭配要統一，而且字體、網頁布局等也要統一。只有保持統一的風格，才不會讓用戶在訪問頁面時產生錯愕的感覺。
希望能幫助到你！
還請及時採納謝謝！
祝生活愉快！

7、很難的UI設計面試題

1. 總體的樣式

從 iOS7 以後，Apple 就一直在採用扁平化的設計模式，去除了所有不必要的紋理和陰影等效果——和早些年間的版本完全不同。Google 的新 MD 設計規范有了一些更加細節的規定，通過一種叫「紙片」的方法來創造更多的層級關系。

2. 實體按鈕

Android 有一個返回按鈕，點擊它可以返回上一個屏幕。

iPhone 上則沒有這樣一個按鈕，所以需要有一種方式能夠讓用戶回到先前的屏幕。通常的解決方案是在屏幕的左上角放置一個返回鍵。

3. 通用元素

兩種平台之間的確存在著一些通用的元素，比如說狀態欄和標題欄，它們會出現在每一屏的頂部。你不應當改變導航欄的高度，如果你想讓 App 看起來更加原生的話。所以，我推薦你在設計的第一頁就定義好標題欄的樣式，然後在其他的屏幕上使用一個佔位的方框來替代，這樣能省下不少時間，但是你應當向程序員說明標題欄在不同的屏幕上都是一樣的樣式。

不同平台上的導航欄有一定的差別。在 Android 上文本是左對齊的，然而 iOS 上是居中對齊的。在 iOS 上，很多企業都用它們的 logo 來替換首頁標題欄中的文字，但是在 Android 設備上這不是一個好的主意。狀態欄(顯示你的網路、電量和時間信息)是系統組件，你不需要考慮設計它，只要確保它們不會對他人造成誤解就好了。

4. 導航

或許iOS 和 Android 平台之間最大的區別就在於他們的導航樣式了。Android 上最主要的導航方式是抽屜菜單，Android 用戶們通常在這個菜單內進行跳轉。而且在整個 App 中，這種體驗是一貫的。Apple 的導航樣式更傾向於 tab bar，它位於屏幕的底部，並且以一種很簡單的方式實現上部內容的切換。當你設計 App 的結構的時候，你可以為不同的平台設計不同的導航樣式。

5. 要不要用卡片式

在 UI 設計中，卡片正逐漸成為一種主要的 UI 設計樣式，它們可以應付多種情況，而且給用戶提供了一種能夠呈現有效內容的便捷方式。視覺上，卡片非常適應於 Android 的 Material Design(它事實上源自於紙張的靈感)。使用陰影和卡片之間的合理間距能夠創建一種自然的外觀。

在 iOS 上，使用卡片設計需要更加的小心謹慎，盡管一些大型的 App，諸如 Facebook 和 pinterest 的確使用了一種略微偏離 iOS 視覺規范的設計風格。Instagram 使用了一種完全扁平化的設計風格，盡管從結構的觀點上看，用戶的每一條推送都能被視為是一張卡片，instagram 的設計很值得你去花時間揣摩，它是如何遵循 iOS 視覺規范的。如果你要在 iOS 平台上應用陰影，你最好小心謹慎，盡量使得這些陰影不是那麼的明顯。

6. 排版

iOS 系統上的默認字體是 Helvetica Neue，在 Android 上則是 Roboto。盡管這兩種字體在外觀上有顯著的差異，但是這兩個字體的尺寸卻是近乎相同的。如果你想要在設計的時候節省時間，那麼用一款字體就可以，但是要和開發人員溝通在不同的平台上使用對應的字體。而在設計重要的布局結構和使用大號字體時，我建議你還是同時用這兩種字體測試效果。

如果你想要精益求精，那麼你就要對不同平台上的設計規范更加註意。比如如下幾條：

Android 的 MD 設計需要用到更多的空格來進行布局

在 MD 中字體大小的變化會更加多樣

在 iOS 上，字體沒那麼多大小差異，但是在字體重量上(Font weight)有更多的變化，同樣允許你創建主次結構

兩個平台都使用比較細的字體來現實正文內容，然而，在下面的例子中，Android 使用了輕(Lighr)和常規(Regular)字體，而 iOS 使用了粗體(Bold)和常規字體

這是一個非常簡單的例子，向你展示了排版方面的一些細微的不同可以導致印象上的巨大差異——你能很快分辨你是在用 Android 手機還是在用 iPhone!

7. 網格和觸摸元件

iOS(@1x 下 44px)和 Android(1:1 比率下 48p)都有對可觸摸元件的設計規范。MD 規范同樣建議對所有元素使用 8dp 網格對齊。

在最近的項目上，我發現遵守 Android 的這些設計規范會更加安全，因為大一些的 48px 的按鈕在兩個平台上都表現良好，而且 MD 的規范更加全面，還經常更新。不管怎麼說，你都應該在設計中使用網格，但是我們發現定義更加明確的 Android 網格會更好用一些。

8. 按鈕樣式

這里是 MD 下定義的幾個按鈕類型：

浮動動作按鈕(Floating action buttons)：最傳統的有邊框的按鈕，陰影厚重明顯，將它們從頁面上分離出來。它們僅應當被用於背景，或者謹慎地在卡片上使用，不應當在警告框或者彈出框上使用，因為使用這種按鈕，就會創建一層視覺深度。這種按鈕的填充顏色一般使用 App 的主色，而下一種按鈕，通常使用輔助的顏色。

扁平化按鈕(Flat buttons)： 通常文本使用 App 的主色，沒有邊框，它們通常使用間距和大寫字母來強調不同內容之間的分離關系。

和 MD 相比較，iOS App 在外觀上是完全扁平化的，沒有層級深度和陰影。主要按鈕有填充顏色，次級按鈕反轉顏色，也就是說，有著主色的邊框和文字。這種方案有時候會受到一定的限制，特別將它是用於標簽欄等元素的時候。要用好這種設計模式，你必須對不同的顏色在你的 App 中分別代表什麼有一個清晰的概念。

9. 動作表單

動作表單(Action sheets)允許用戶在多項操作中進行選擇。比如，當我點擊(或者長按)我想要分享、上傳、復制或者刪除的圖片時。

iOS 和 Android 用近乎相同的方式解決這種問題。首先，動作表單都是出現在屏幕的地步，然後在主要內容上罩上一層陰影。然而，它們在創造不同的深度和其他細節方面有著一些不同。

Android 在動作表單上加了一層厚重的陰影，表明它是脫離於原先的內容的。

iOS 的動作表單沒有陰影，僅僅是在原先的背景上防止了一個有一定透明度的灰色圖案。

下拉按鈕

只存在於 Android 上，它允許用戶快速選擇功能。然而，記住，這並不是 iOS 原生的控制項之一。在下面的例子中，用戶點擊 profile，然後彈出了一個下拉菜單，提供了幾個選項。

特殊數據輸入

像特定的一些數據的輸入，比如日期和時間，Android 現在有了原生的對話框，雖然它們看起來像是警告彈出框，一個例子是日歷輸入。iOS 使用完全不同的方式解決這個問題，它會在屏幕的底部彈出一個轉輪讓用戶進行選擇。在設計這些東西的時候要小心，並且和開發人員做好溝通。

10. 分類控制

分類控制允許用戶以一種簡單的方式在不同內容之間進行跳轉。在不同的平台上，該控制項的使用方式是完全相同的，但是在視覺上有著顯著差異，因此要注意使用正確的形式。在 iOS 上，分類控制控制項的外觀很像我們剛才提到的按鈕。而在 Android 上，通過間距來展現它們的分離關系，同時用下劃線來標明目前所處的位置。

11. 彈出框

正確地處理這一類型的控制項十分重要，因為他們也許會涉及到一些很重要的操作，例如注冊，確認條款，甚至是確認支付。我們需要讓他們看起來是原生的，以便產生一種安全感和信任感。

Android 的警告框使用的按鈕樣式，就是我們先前提到過的扁平按鈕，你可以在 MD 說明文檔中找到它們應有的尺寸。動作按鈕位於卡片的右半部分。實際上，所謂的按鈕其實就是一個文本。它們使用大寫字母將它們和其他內容區別開，並且使用 App 的主色。

12. icon

icon 設計是在 UI 設計中的一個比較特殊的領域。不管你是使用免費的 icon，和專門的 icon 設計師合作，還是自己設計 icon，不同的平台上對 icon 都有特別的樣式要求。iOS 平台更偏好線形 icon，Android 上的 icon 的描邊則更加地粗壯，或者乾脆就用填充的 icon。這里是兩個平台上的 icon 對比，你也可以點擊這里的鏈接查看 iOS 和 Android 下的 icon 設計規范。

13. 麵包菜單、載入圖片

不幸的數字 13(註：最後的晚餐的在場人數)。通常來說，警告框和表示載入的圖標留給開發者做決定。你或許已經經歷過彈出框和警告框的設計和 App 的其他部分樣式完全脫節的情況。那是因為通常 iOS 和 Android 平台都有對這些情況的默認的處理方案，但是你也可以利用你的方案進行替代。在這里，讓你的設計能被真實還原的最好的方式就是和開發人員多進行溝通。

14. 通用 UI 控制

復選框，單選框和輸入框，以及開關都是應該有著原生感覺的控制項。像警告框和對話框一樣，這些控制項保持默認樣式的話能夠給用戶帶來熟悉感和信任感。盡可能多地使用原生控制項，用戶自然知道如何使用他們，並且在涉及到敏感信息和支付事宜的時候能夠更信任你的 App。

在下面的例子中，我們可以看到兩個平台上的差異其實是很小的，小到你在設計的時候可以忽略這些差異，用其中一種形式設計，但是不要忽略細節上的差異所帶來的原生的感覺。使用你的 UI 庫，並且在開發的早期和開發人員做好說明。

引用自：CSDN，粉絲轉載

8、網頁界面設計

UI設計即User Interface(用戶界面)的簡稱。簡單的來說就是圖形界面設計師（ps：這個職位可以不用寫html這類的，但是最好要了解html，因為這樣更有利於設計出來的頁面適合後面的重構師開發）
然後還有就是上面提到的頁面重構師：他的性質就是把頁面設計效果圖，用HTML+CSS改造成網頁
然後這裡面還會衍生一個前端開發的職位，他的性質是給上面的網頁加入前端腳本，實現一個互動效果，比如我們常見的圖片滾動，動畫，還有表單驗證等等常見的效果
然後就是後端程序員了（這裡面可能還會衍生專門做資料庫）反正這類人，就是把網站實現動態，與資料庫對接
（ps：不做過多闡述，有不明白可以問我）

9、網頁界面UI設計的特點是哪些？

1、交互性

2、版式的不可控性
3、技術與藝術結合的緊密性
4、多媒體的綜合性
5、多維性