網頁ui設計流程

1、入門必讀，UI設計的整個工作流程是怎樣的

設計流程

一、確認目標用戶

在UI設計過程中，需求設計角色會確定軟體的目標用戶，獲取最終用戶和直接用戶的需求。

用戶交互要考慮到目標用戶的不同引起的交互設計重點的不同。

例如：對於科學用戶和對於電腦入門用戶的設計重點就不同。

二、採集目標用戶的習慣交互方式

不同類型的目標用戶有不同的交互習慣。這種習慣的交互方式往往來源於其原有的針對現實的交互流程、已有軟體工具的交互流程。

當然還要在此基礎上通過調研分析找到用戶希望達到的交互效果，並且以流程確認下來。

三、提示和引導用戶

軟體是用戶的工具。因此應該由用戶來操作和控制軟體。軟體響應用戶的動作和設定的規則。

對於用戶交互的結果和反饋，提示用戶結果和反饋信息，引導用戶進行用戶需要的下一步操作。

四、一致性原則

設計目標一致

軟體中往往存在多個組成部分（組件、元素）。不同組成部分之間的交互設計目標需要一致。

例如：如果以電腦操作初級用戶作為目標用戶，以簡化界面邏輯為設計目標，那麼該目標需要貫徹軟體（軟體包）整體，而不是局部。

元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個（類）軟體採用一致風格的外觀，對於保持用戶焦點，改進交互效果有很大幫助。遺憾的是如何確認元素外觀一致沒有特別統一的衡量方法。因此需要對目標用戶進行調查取得反饋。

交互行為一致

在交互模型中，不同類型的元素用戶觸發其對應的行為事件後，其交互行為需要一致。

例如：所有需要用戶確認操作的對話框都至少包含確認和放棄兩個按鈕。

對於交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個理念設計，會更加簡化用戶操作流程。

五、可用性原則

可理解

軟體要為用戶使用，用戶必須可以理解軟體各元素對應的功能。 [1] 

如果不能為用戶理解，那麼需要提供一種非破壞性的途徑，使得用戶可以通過對該元素的操作，理解其對應的功能。

比如：刪除操作元素。用戶可以點擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認刪除操作，用戶可以更加詳細的理解該元素對應的功能，同時可以取消該操作。

可達到

用戶是交互的中心，交互元素對應用戶需要的功能。因此交互元素必須可以被用戶控制。

用戶可以用諸如鍵盤、滑鼠之類的交互設備通過移動和觸發已有的交互元素達到其它在此之前不可見或者不可交互的交互元素。

要注意的是交互的次數會影響可達到的效果。當一個功能被深深隱藏（一般來說超過4層）那麼用戶達到該元素的幾率就大大降低了。

可達到的效果也同界面設計有關。過於復雜的界面會影響可達到的效果。（參考簡單導向原則）

可控制

軟體的交互流程，用戶可以控制。

功能的執行流程，用戶可以控制。

如果確實無法提供控制，則用能為目標用戶理解的方式提示用戶。

(1)網頁ui設計流程擴展資料

設計原則

1、簡易性

界面的簡潔是要讓用戶便於使用、便於了解產品，並能減少用戶發生錯誤選擇的可能性。

2、用戶語言

界面中要使用能反映用戶本身的語言，而不是游戲設計者的語言。

3、記憶負擔最小化

人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

4、一致性

它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。

5、清楚

在視覺效果上便於理解和使用。

6、用戶的熟悉程度

用戶可通過已掌握的知識來使用界面，但不應超出一般常識。

7、從用戶習慣考慮

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。

8、排列

一個有序的界面能讓用戶輕松的使用。

9、安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。

10、靈活性

簡單來說就是要讓用戶方便的使用，但不同於上述。即互動多重性，不局限於單一的工具(包括滑鼠、鍵盤或手柄、界面)。

11、人性化

高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並能保存設置。

參考資料來源：網路-UI設計

2、超贊干貨，一個完整的UI設計流程是怎樣的

需要的基礎就是一些簡單的美術基礎和平面設計基礎，要求也不算高，一般流程是這樣的，大致5個階段，PS ，Illustrator ， DW，InDesign都會用到。

第一階段 UI用戶設計基礎（UI行業發展及UI設計師職業規劃，美術基礎，平面設計基礎，圖形與創意設計，網頁設計基礎，互動式網站），軟體：Photoshop、Illustrator

第二階段 移動界面設計（圖標創意思路與方法，圖標的創作設計，主題圖標設計，Ios系統Android系統Windows phone系統，UI設計實訓課程）

第三階段 交互類（UCD，交互設計高級技術）

第四階段 流程設計（界面開發對接，流程管理，移動媒體綜合開發實訓）

第五階段 綜合項目實訓及就業階段（根據所學內容，選擇一種移動平台（IOS/Android/Winphone），軟體界面，WUI類型設計，完成初稿設計。依據項目初期確定的需求進行驗收，並簽署驗收報告。）

3、設計一個網頁的一般流程是什麼樣的？

跟客戶粑粑多聊多問，知道客戶粑粑的需求，當然，他有理想的參考網站那是最好的，可以省去很多力氣。

你要知道固定尺寸，比如說：pc端網頁需求常用尺寸：一般常用1920px，1440px，1366px，1280px，1200px，1136px，1080px等尺寸吧，為什麼會有這樣的尺寸呢，因為要適應不同的廠家生產的顯示器的正常尺寸，台式機常規尺寸一般在1920px，筆記本可能就1440px-1080px之間了，所以設計網頁首先考慮的就是適應不同顯示器尺寸，尺寸適應越好，說明兼容越好，設計可以說是越成功。

除了pc端以外，考慮第第二個適應就是移動端的尺寸，常用尺寸是：340px，640px，720px，1080px，這個根據甲方對圖片與瀏覽速度需求做出適當選擇，舉例：640px常規網站佔用開啟速度可能是0.5秒全開，因為640px的網站本身比較小，所以打開速度快，客戶使用友好，但是解析度低了，客戶視覺感就差，設計1080px打開速度就慢，可能1.5秒，客戶體驗感就相對差，但解析度高，客戶視覺效果就會好。

上面兩個考慮好了以後，考慮字體大小以及顏色，如何能讓字體舒適的展示給客戶，這里提出一個參考，pc端建議字體大小12-18px之間，移動端參考640px尺寸的字體大小建議18px-26px之間，顏色反差盡量不要太大，因為顏色反差大了不適合人的正常閱讀。

上面三個考慮好了以後，需要知道客戶粑粑是做哪種網站，常規就三種，企業展示站（企業里用的對外展示的），信息站（58，趕集那種的），商城站（一般小程序做的較多，網站也有搞得，你可以理解為做一個新的淘寶站）。

首先是考慮導航欄，做什麼樣的站去參考類似站的導航欄是什麼樣子的，如果這里參考別人都不會，建議停下來看會教程吧。

其次是做banner/輪播圖，每個網站都需要做輪播圖，甭管是打廣告還是什麼，banner都是必不可少的，這個地方搞不了，去學ui設計吧。

參考別人的頁頭頁腳怎麼搞。

然後就是內容了，把每一頁的按照順序設計排版好久ok了。

做完後給客戶粑粑過審。

注意：這里說的是設計網頁，不是製作網頁。

4、網頁設計製作詳細流程

分析如下：

1、首先下載安裝Dreamweaver，打開後，新建一個網頁，一般選擇「HTML」建立網頁。選擇「經典」界面，有助於我們更便捷使用這個軟體。

2、下面選擇這三個界面，代碼、拆分、設計，一般默認設計界面，對於新手這個功能具有可視化，能更好的製作網頁。

3、下面我們來製作網站站點，在電腦上建一個文件作為根目錄。我們所建網站的所有文件和網頁都保存在這個文件中。站點的作用就是使你的網站網頁之間框架清晰。同時給站點起個名字。

4、然後再在站點根目錄下建立一個專門儲存網站圖片的文件，並設置默認。這樣你添加到這個網站的所有圖片都自動保存到這個文件，不會丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網）來介紹，點擊右下方籃球資訊網——下拉點擊管理站點——點擊高級設置——設置默認圖像文件夾為剛建立的images。保存。

5、下面我們來製作這個網站首頁，先學習添加圖片。插入——圖像——選擇素材添加。點擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示範。

6、下面學習添加文本。編輯「籃球資訊網」，下面屬性可以設置文本字體、添加超鏈接等等，點擊頁面屬性，可以詳細編輯文本屬性。

7、網頁基本就是文字和圖片的組合，添加視頻還需要學習者好好搜索Dreamweaver 的使用視頻加以學習。最後製作完一個網頁要記得保存。左上角文件——保存。

8、最後我們學習添加超鏈接。我用建立的第二個網頁來做示範。選中籃球資訊網文本，點擊頁面下方屬性——鏈接——點文件小按鈕——選中第一個網頁，這樣籃球資訊網文本變成藍色。這是網站內部鏈接，相反就有外部鏈接。添加如圖，一定要寫http://......就可以了。

9、最後我們瀏覽網頁。左上角文件——在瀏覽器中瀏覽網頁，點擊網頁中兩個鏈接都能到達指定網頁。

(4)網頁ui設計流程擴展資料：

網頁設計

設計網站要注意兩個要點：整體風格和色彩搭配。

風格

網站的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。

風格（Style）是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個「整體形象」包括站點的CI（標志、色彩、字體、標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。

色彩搭配

無論是平面設計，還是網頁設計，色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候，我們看到的不是優美的版式或者是美麗的圖片，而是網頁的色彩。

網頁配色小技巧：

1．用一種色彩：這里是指先選定一種色彩，然後調整透明度或者飽和度，這樣的頁面看起來色彩統一，有層次感；

2．用兩種色彩：先選定一種色彩，然後選擇它的對比色；

3．用一個色系：簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。

在網頁配色中，還要切記一些誤區：

1．不要將所有顏色都用到，盡量控制在三至五種色彩以內；

2．背景和前文的對比盡量要大（絕對不要用花紋繁復的圖案作背景），以便突出主要文字內容。

5、ui設計整個過程一般分為哪些步驟？

UI設計的工作流程會根據公司性質、規模、項目性質、項目規模、UI職能要求等的不同有所區別。
UI設計參與完成的流程大致為：
1. 參與需求評審，理解PRD
2. 用戶調研、情緒板梳理（主要針對一些對體驗、視覺要求很高的產品，需要更加多關注人的設計，不是必要流程）
3. 交互設計
4. 視覺設計
5. 視覺評審（視覺稿確定過後）
6. 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設計是什麼?需要學習代碼知識嗎？

網頁ui設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。網頁ui設計需要學習代碼知識的，例如HTML/CSS。

UI設計分三個分支：

1、圖形設計師Graphic UI designer，簡稱GUI,國內目前大部分UI工作者都是從事這個行業。包括(網頁設計，軟體界面，移動端界面設計)，每天的工作做著各種界面設計的美觀。

2、交互設計師，做整個項目的交互流程，使操作更簡單，直接，突出主題。

3、用戶體驗研究師，主要是用各種方法去了解用戶現在需要什麼樣的體驗什麼樣的界面，從而對這個項目的總體性體驗做決策的，來方便用戶使用。

(7)網頁ui設計流程擴展資料：

UI設計原則：

1.簡易性

界面的簡潔是要讓用戶便於使用、便於了解產品，並能減少用戶發生錯誤選擇的可能性。

2.用戶語言

界面中要使用能反映用戶本身的語言，而不是游戲設計者的語言。

3.記憶負擔最小化

人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。

4.一致性

它是每一個優秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產品內容相一致。

5.清楚

在視覺效果上便於理解和使用。

6.用戶的熟悉程度

用戶可通過已掌握的知識來使用界面，但不應超出一般常識。

7.從用戶習慣考慮

想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。

通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。

8.排列

一個有序的界面能讓用戶輕松的使用。

9.安全性

用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統的提示。 10.靈活性

簡單來說就是要讓用戶方便的使用，但不同於上述。即互動多重性，不局限於單一的工具(包括滑鼠、鍵盤或手柄、界面)。

11.人性化

高效率和用戶滿意度是人性化的體現。應具備專家級和初級玩家系統，即用戶可依據自己的習慣定製界面，並能保存設置。

8、UI設計需要包括什麼內容

1、圖形設計，軟體產品的「外形」設計。

2、交互設計，主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計，並且確立交互模型，交互規范。

3、用戶測試/研究，這里所謂的「測試」，其目標恰在於測試交互設計的合理性及圖形設計的美觀性，主要通過以目標用戶問卷的形式衡量UI設計的合理性。

如果沒有這方面的測試研究，UI設計的好壞只能憑借設計師的經驗或者領導的審美來評判，這樣就會給企業帶來極大的風險。

有的公司UI設計工作很細分，有的就要什麼都做，比如淘寶美工就專心做圖形設計；游戲行業的UI細分的深，做美術的就做美術，做交互的就做交互。有些公司的UI要比較全能，草圖交互原型美術一條龍甚至還要具備一定的前端編碼能力。

(8)網頁ui設計流程擴展資料

UI設計的前身是平面、網頁設計，在原專業的基礎上加入了一些人機交互的邏輯、控制項的應用、組件的狀態設計等內容。這是由於互聯網發展的精細化延伸出來的新門類，因此設計的軟體應用就是基本功了。

需要掌握Photoshop（圖像處理）、illustrator（圖形製作）、AfterEffects（視頻處理）、Axure（原型設計）、Dreamweaver（網頁製作）、Coreldraw（矢量製作）、Flash（動畫製作）等設計軟體及HTML5.0和DIV+CSS網頁代碼基礎。

學會了各類設計軟體的應用還不夠，此時還不能獨立創作，因為缺乏創意的表現技能，所以需要掌握鉛筆、水彩筆、素描本、手繪板等不同手繪工具的熟練運用。此部分主要是設計思維的訓練及表現，重在設計理論的學習與構圖技巧，學會解析各類圖標的設計原理及表現技法。

9、#ui設計師#一個App和網頁設計的流程是什麼樣的？能詳細說明下嗎？

APP設計流程 接到項目，先進行市場分析確定他的可行性，然後對目標用戶分析確定他的可用性，競品分析，吸取競品的優勢，根據用戶研究做出原型圖設計，再根據原型圖進行優化升級，做出合適風格的高保真圖，最後切圖，標注給開發人員。
網頁設計流程 網頁的話很APP進行的差不多，前期分析，而後根據企業特性，公司文化，公司特色，公司形象，展示自己的優勢，做出讓用戶易操作，易識別，易用性高的網站。 來自職Q用戶：用戶3780419
行業定性-市場方向-市場調查-潛在用戶-確定功能-開發流程（原型圖-視覺圖-開發-測試）等 來自職Q用戶：匿名用戶