網站界面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要做網頁界面設計把，應該怎麼去學習網頁界面設計呢，有什麼快速的好方法嗎

什麼事情都要有過過程，不可能一頻登天，

UI要做成網頁的話 最簡單方法是，PS CC這類的版本好像支持直接生成HTML（靜態）網頁；

學習DIV +CSS 這個是最基本的HTML代碼，上手很快的，學習完這個可以創建HTML網頁

HTML5是這些年新出來的HTML升級版，直接支持動畫與游戲類的開發

網頁的尺寸： 每個人使用的電腦顯示尺寸都不一樣的，所以才要考慮到用戶體驗的問題，常用的尺寸為1000px左右（也就是為了1024px尺 也就是14寸顯示器）

3、在UI設計上，網頁界面設計要學到哪些知識？

目前UI設計應用很廣泛，涉及方面很多，網頁設計需要的學習的有：div+css+ps+js+jq。
網頁設計主要是利用Dreamweaver或者其他軟體，用div+css布局，用js實現需要的效果
根據ps做好的圖稿進行切圖，用div+css美化網頁就好了。

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

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

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

5、UI設計需要學習哪些內容？

1、工具軟體

主要使用PS、Ai、Axure、AE等軟體。每個軟體的學習要加上實際案例，不然很容易就忘掉自己所學的軟體知識。
2、設計思維
說設計的思維，得先有一個設計的美感，連美感沒有，更別說做設計了，提升審美可以多看一些優秀作品。此外，還要學習思維，可能剛開始你就是描摹，沒有自己的思維，慢慢的做總結，最後變成自己的東西。
3、設計技能

只掌握了軟體的工具使用和操作技能，其實是遠遠不夠的，只能說你會用軟體，但是還沒有掌握設計技能。

6、ui設計入門新手必看：學習UI網頁設計你會排版嗎

UI交互設計是什麼?

UI即 User INterface(用戶界面)的簡稱。是指對產品的人機交互、操作邏輯、界面的美觀性的整體設計。人機交互是一門研究產品與用戶之間交互關系的學問;因此好的UI設計不僅是給使用者帶來舒適的視覺感受、還要具有完美的操作體驗感，降低學習成本、增加使用樂趣、充分體現出這個產品的定位和特點。
成都銘代碼科技有限公司今天給大家介紹的這個學習方法分4大階段，每一個階段都逐漸的加深，小編在這里已經整理的非常完善，一個新手學習者基本上按照此套流程，一階段學習來，肯定會入門，而且多去練習找到工作應該還是可以的。
第一階段：主要是常用軟體的學習使用，以後的大部分工作中都要用到的。
第二階段：主要是主要是對創意思維和美學修養進行培養，我們在熟練使用電腦軟體的情況下，掌握設計的方法技巧，再加上一個系統全面的設計思維和良好的審美能力可以高效率高質量完成設計工作。
第三階段：網站建設的基礎知識得懂。網站建設的基本流程、網頁常用元素以及web前端知識的學習也是很重要的。後期可以去給自己的作品添加一些簡單的動態效果，做的更精緻絢麗、吸引人！
第四階段：智能設備交互界面的設計。界面的用戶體驗極其重要，如何讓軟體的操作變得舒適、簡單、自由，為用戶帶來更好的交互體驗？這這階段的學習是特別重要的。
UI設計，不是簡單的網頁設計。UI設計師的工作內容包括：負責軟體界面的美術設計、創意製作；根據各種相關軟體的用戶群，提出構思新穎、有高度吸引力的創意設計；對頁面進行優化，使用戶操作更趨於人性化；維護現有的應用產品；收集和分析用戶對於GUI的需求等。所以，UI設計師可以說是兼具美術設計、程序編碼、市場調查、心理分析等諸多方面的綜合能力。

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

1、交互性

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

8、網路界面ui設計的課程有那幾個板塊啊？

交互時代現下界面ui設計分為：flash，photoshop基礎班；DIV+CSS培訓班；視覺強化班；網頁設計專業班和UI設計專業班；系統的學習和實戰的經驗培養訓練以上幾大板塊。

9、界面ui設計課程分哪幾塊？

交互時代認為界面ui設計分為以下5大塊：flash，photoshop基礎班；DIV+CSS培訓班
；視覺強化班；網頁設計專業班和UI設計專業班；系統的學習和實戰的訓練。