正文

ui設(shè)計流程進(jìn)行的第一步是什么（ui設(shè)計流程進(jìn)行的第一步是什么意思）

發(fā)布時間：2023-04-28 02:43:37 稿源：創(chuàng)意嶺閱讀： 439

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計流程進(jìn)行的第一步是什么的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、什么是UI？它的設(shè)計原則是什么？
2、零基礎(chǔ)如何學(xué)習(xí)UI設(shè)計？
3、UI設(shè)計師如何與產(chǎn)品經(jīng)理以及開發(fā)協(xié)同合作？
4、前端拿到UI設(shè)計的圖如何開始布局設(shè)計

ui設(shè)計流程進(jìn)行的第一步是什么（ui設(shè)計流程進(jìn)行的第一步是什么意思）

一、什么是UI？它的設(shè)計原則是什么？

什么是UI？

UI即User Interface（用戶界面）的簡稱。UI設(shè)計則是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。好的UI設(shè)計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)。UI還有其它的意義，如Unit Interval，Univ of Iowa，Unlock Instruction，Urgent Interrupt。

UI的設(shè)計原則是什么？

1.簡易性

界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。 2.用戶語言

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

3.記憶負(fù)擔(dān)最小化

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

4.一致性

它是每一個優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。

5.清楚

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

6.用戶的熟悉程度

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

7.從用戶習(xí)慣考慮

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

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

8.排列

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

9.安全性

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

10.靈活性

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

11.人性化

高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。

二、零基礎(chǔ)如何學(xué)習(xí)UI設(shè)計？

零基礎(chǔ)如何學(xué)習(xí)UI設(shè)計？在現(xiàn)目前UI設(shè)計是一個非?；鸬男袠I(yè)，很多人都認(rèn)為UI設(shè)計可以拿高薪，便擠破腦袋的想要入門。在你接觸UI之前，首先需要給自己一個定位，是否是真正的喜歡UI，不管做什么行業(yè)，喜歡、興趣是第一的，只有這樣下一步.

那如果學(xué)習(xí)UI我們要怎么去進(jìn)行呢？

首先你總得知道UI是什么吧？

1、什么是UI（直接百度）

UI，即用戶界面（User Interface）是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介。它實(shí)現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換。

簡而言之，UI設(shè)計師就是設(shè)計用戶界面。一般我們手機(jī)上app的界面都是UI設(shè)計師需要設(shè)計的。

通俗易懂點(diǎn)說，UI就是做界面的，最重要的部分是app界面，看到手機(jī)里各種app沒？大部分展現(xiàn)在你面前的東西，都是UI設(shè)計師需要做的。

當(dāng)你理解了什么是UI的時候那么接下來我們要知道我們要會使用什么軟件？

2、UI設(shè)計師需要會哪些軟件

需要軟件和基礎(chǔ)學(xué)習(xí)的小伙伴可以到文件夾中下載哦！

分別是Photoshop，Illustrator，After Effects，Axure RP 8。

簡稱，PS，AI，AE，ARP軟件。

PS主要用于制作UI設(shè)計中界面和圖標(biāo)設(shè)計，也可以對UI中的一些廣告頁進(jìn)行設(shè)計。

AI主要用于制作UI設(shè)計中的圖標(biāo)設(shè)計，也可以對UI中的一些引導(dǎo)頁的插畫圖進(jìn)行設(shè)計。

AE主要用于制作UI設(shè)計中的交互動效，在現(xiàn)今的UI產(chǎn)品中很多都是需要用動效的。

ARP主要用于制作UI設(shè)計中的原型圖，線框圖，流程圖的設(shè)計。

說了那么多廢話，那應(yīng)該怎么學(xué)習(xí)呢？

第一個，練習(xí)軟件基礎(chǔ)知識，現(xiàn)在網(wǎng)上有很多這樣的軟件基礎(chǔ)知識視頻，先把軟件理解之后我們在來開始創(chuàng)作練習(xí)。

第二個，學(xué)習(xí)手繪知識，很多人覺得沒有手繪知識，我也可以做UI設(shè)計，

但是手繪能帶給我們的是

1.鍛煉我們理解物體的形體、輪廓、明暗的思維。

持續(xù)的繪畫練習(xí)，除了排線這些硬性的技巧，同時就是在鍛煉我們對畫面的專業(yè)思考能力，觀察和發(fā)現(xiàn)細(xì)節(jié)的習(xí)慣，而有這樣的思維訓(xùn)練，在以后我們繪制圖形、圖標(biāo)、擬物風(fēng)格作品的時候才能快速抓到要點(diǎn)。

物體的明暗關(guān)系，物體間交匯的陰影，各物體的輪廓，前后景的景深，畫布的褶皺方式等……而這都是有意識的思考后動手才能完成的結(jié)果，構(gòu)成一幅平穩(wěn)準(zhǔn)確細(xì)節(jié)豐富的作品。

這也是為什么很多人講，不知道如何去提升，其實(shí)這就是一個關(guān)鍵點(diǎn)

2.學(xué)會構(gòu)圖

你需要把內(nèi)容完整畫進(jìn)紙上，就需要在畫布也做構(gòu)圖，是用居中還是三角，黃金三分還是螺旋，無論通過什么手段，最終都是找到一個你覺得好看的位置。而這個過程也是平面構(gòu)成的實(shí)踐操作。在未來如果學(xué)習(xí)攝影也會有良好的助力！

這會鍛煉你的主視覺和排版的能力。

第三個，學(xué)習(xí)UI的設(shè)計理論

，軟件只是一種工具，設(shè)計才是最終要體現(xiàn)的，這個時候你需要多看關(guān)于這方面的書籍。

先要了解的是三大構(gòu)成（百度百科）即三大構(gòu)成即平面構(gòu)成、色彩構(gòu)成與立體構(gòu)成，是現(xiàn)代藝術(shù)設(shè)計基礎(chǔ)的重要組成部分。

設(shè)計類的相關(guān)書籍可以買一些回來，比如《商業(yè)字體設(shè)計》、《版面設(shè)計的原理》等等，網(wǎng)上一搜就很多

第四個，前端的對應(yīng)技能，作為UI設(shè)計師，是必須掌握前端的對應(yīng)技能的，這不是可以完全無限制的發(fā)揮設(shè)計技藝的地方，你就要有取舍，要跟的上前端開發(fā)的邏輯，做出穩(wěn)定可以被實(shí)現(xiàn)的設(shè)計稿，必須掌握前端切圖流程。學(xué)會HTML5 CSS3 JQ的入門，安卓、IOS的實(shí)現(xiàn)規(guī)范！

第五個，那就是創(chuàng)作，我們先要從別人的身上吸收內(nèi)容，簡單的來說就是抱大腿，進(jìn)行臨摹，然后在進(jìn)行創(chuàng)作，尋找到一個適合自己的風(fēng)格

需要從以下方面來進(jìn)行創(chuàng)作學(xué)習(xí)

圖形設(shè)計
界面設(shè)計
交互設(shè)計
設(shè)計規(guī)范
動效設(shè)計

最后一個那就是思維拓展，你要想走到時代的前沿，那你必須得多了解世界，了解其他行業(yè)的相關(guān)內(nèi)容，尤其是現(xiàn)在的人，都很討厭學(xué)習(xí)，你一樣，我也一樣，這是現(xiàn)在這個社會的通病，互聯(lián)網(wǎng)充斥這我們的每一天，所以我們需要給自己制定一個目標(biāo)，然后實(shí)施計劃，嚴(yán)格的執(zhí)行，在這過程中不斷修正自己的計劃，最后達(dá)到自己想要的結(jié)果，如果你想要做那么請請拿出你的態(tài)度。

學(xué)習(xí)ui你需要了解的知識

三、UI設(shè)計師如何與產(chǎn)品經(jīng)理以及開發(fā)協(xié)同合作？

一般工作流程是：

1.產(chǎn)品經(jīng)理(PM)提出產(chǎn)品方面的需求，輸出PRD(產(chǎn)品需求文檔)和原型圖，并發(fā)起需求評審會議。

2.交互設(shè)計師接到PRD文檔后進(jìn)行梳理和確認(rèn)，將模糊的需求和功能具體化，制作出低保真交互流程圖和頁面的結(jié)構(gòu)信息框架，并以文字標(biāo)注的形式進(jìn)行交互說明，最終輸出交互規(guī)范文檔，并召開交互評審會議。

3.UI設(shè)計師接到交互文檔后，第一步并不是馬上動手去做，而是要先對需求進(jìn)行理解，理解該產(chǎn)品的功能內(nèi)容是什么?服務(wù)的人群有哪些特征?產(chǎn)品的目標(biāo)是什么等等。有疑問的地方及時與PM或交互設(shè)計師進(jìn)行溝通，最終達(dá)成對產(chǎn)品目標(biāo)的一致理解;第二步，找競品。對競品的色彩搭配、結(jié)構(gòu)布局、icon設(shè)計、字體規(guī)范等方面進(jìn)行研究和分析，可作為參考借鑒，但不要抄襲;第三步，視覺設(shè)計。到這一步就可以真正開始動手做了，按照產(chǎn)品的需求，對重要功能和內(nèi)容進(jìn)行突出，弱化次要內(nèi)容，注意整個頁面的層級結(jié)構(gòu)和比例關(guān)系，保持美觀性和易用性之間的平衡。設(shè)計過程中參照移動端和PC端的設(shè)計規(guī)范，遵循一致性設(shè)計原則。

第四步，交付。在與PM和設(shè)計主管確認(rèn)設(shè)計稿ok后，對頁面進(jìn)行標(biāo)注和切圖的輸出。切圖根據(jù)需要，對于iOS系統(tǒng)，需要提供1倍圖、2倍圖、3倍圖，同時注意切圖的命名規(guī)范(網(wǎng)上有很多關(guān)于切圖命名規(guī)范的文章，這里不再贅述);對于android系統(tǒng)，主要提供hdpi、xhdpi、xxhdpi、xxxhdpi尺寸的切圖，特殊情況還需要提供點(diǎn)九圖。

4.開發(fā)工程拿到標(biāo)注稿和切圖后，對開始對頁面框架進(jìn)行搭建。這時候，UI設(shè)計師的工作并沒有結(jié)束，跟進(jìn)和驗(yàn)收也是UI設(shè)計工作的重要組成部分，即要保證設(shè)計稿的還原度。中途若出現(xiàn)問題，也要及時配合開發(fā)小伙伴一起解決。一個優(yōu)秀的UI設(shè)計師，除了關(guān)注設(shè)計執(zhí)行上的工作以外，前期的設(shè)計規(guī)劃和后期的迭代跟進(jìn)同樣需要關(guān)注。

以上就是青藤小編關(guān)于UI設(shè)計師如何與產(chǎn)品經(jīng)理以及開發(fā)協(xié)同合作的相關(guān)分享，希望對大家有所幫助，如果您想要了解更多相關(guān)內(nèi)容，歡迎大家及時在本平臺進(jìn)行查看哦!

四、前端拿到UI設(shè)計的圖如何開始布局設(shè)計

前端拿到UI設(shè)計的圖開始布局設(shè)計的方法

布局是頁面構(gòu)成的前提，是后續(xù)展開交互和視覺設(shè)計的基礎(chǔ)。設(shè)計者在選擇布局之前，需要注意以下幾點(diǎn)原則：

明確用戶在此場景中完成的主要任務(wù)和需獲取的決策信息。

明確決策信息和操作的優(yōu)先級及內(nèi)容特點(diǎn)，選擇合理布局。

一、常用布局

網(wǎng)站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設(shè)計前先了解這些模板有助于讓用戶快速找到適合自己產(chǎn)品的頁面布局。

1、網(wǎng)站展示頁

網(wǎng)站展示頁（即官網(wǎng)頁）通常是用戶了解網(wǎng)站或產(chǎn)品的第一步。這類頁面通常會包含產(chǎn)品展示圖，簡短的產(chǎn)品介紹信息，以及用戶登錄入口等。在設(shè)計時我們建議：

明確你要傳達(dá)的內(nèi)容，保持簡短而清晰的文案。

搭配清晰、直觀的產(chǎn)品圖片，有助于加深用戶對產(chǎn)品的理解和記憶。

2、控制臺頁

控制臺頁（Dashboard）集合了大量多樣化的信息（如數(shù)字，圖形，文案等），需要一目了然地將關(guān)鍵信息展示給用戶。因此，如何將龐大復(fù)雜的信息精簡清晰地展示出來，是設(shè)計此類頁面的關(guān)鍵。在設(shè)計時要注意以下幾點(diǎn)：

按照信息的重要程度來組織頁面排版，突出展示關(guān)鍵信息。

將數(shù)據(jù)可視化，讓用戶可以直觀地了解關(guān)鍵信息及整體情況。

合理地使用顏色及柵格排版，減輕用戶的視覺負(fù)擔(dān)。

3、列表頁

列表設(shè)計是并列式展現(xiàn)信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設(shè)計的關(guān)鍵。在設(shè)計時要注意以下幾點(diǎn)：

根據(jù)用戶需求來定義信息展示的等級，僅展示關(guān)鍵信息及操作。

當(dāng)信息內(nèi)容較為復(fù)雜時，可將次要的信息折疊或放到詳情頁面中，以遞進(jìn)的方式讓用戶獲得更多的信息。

4、表格頁

表格作為多維信息展示的載體，使復(fù)雜的信息更易于閱讀與理解。它的易讀性，便捷性，易操作性對產(chǎn)品的體驗(yàn)起著舉足輕重的作用。因此，我們在設(shè)計時要注意以下幾點(diǎn)：

構(gòu)造清晰的表格布局，有利于提升讀者對信息的接收速度和理解程度。

更多地展示用戶所必須的信息，通過視覺上的調(diào)優(yōu)突出展示重點(diǎn)信息。

當(dāng)界面需要在一個很大的多縱行表格中展示數(shù)據(jù)，或每一橫列數(shù)據(jù)有多行信息時，可以巧妙地運(yùn)用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區(qū)分。

5、詳情頁

詳情頁面一般會承載大量的基本信息，擴(kuò)展信息，或者狀態(tài)信息。對于信息效率和優(yōu)先級判定的要求會比較高。清晰的布局能幫助快速看到關(guān)鍵信息，提高決策效率。這設(shè)計時有以下幾點(diǎn)需要注意：

清晰的排版格式，易于閱讀的文本大小及間距，都是影響用戶獲取信息效率的關(guān)鍵因素。

圖文搭配比單文本展示信息能更好地提高用戶的理解。

6、表單頁

表單頁通常用來執(zhí)行登錄、注冊、預(yù)定、下單、評論等任務(wù)，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁面模式。因此，舒適的表單設(shè)計，可以引導(dǎo)用戶高效地完成表單背后的工作流程：

考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；

內(nèi)容是表單的核心，保證表單的內(nèi)容精簡（盡量避免多余的輸入項(xiàng)）；

標(biāo)簽的命名要易于用戶閱讀和理解，避免模糊的描述給用戶造成困擾；

醒目的提交或完成按鈕，放在用戶的瀏覽線的終點(diǎn)更有利于用戶的完成操作。

二、柵格

我們通過定義網(wǎng)格、間距來呈現(xiàn)產(chǎn)品布局的最佳效果，設(shè)計師在設(shè)計時可按（移動：『頁面總寬 750px，內(nèi)容區(qū) 750px』，PC：『頁面總寬 1440px，內(nèi)容區(qū) 1208px』）來設(shè)定，并在此基礎(chǔ)上以 12等分的柵格來劃分整個設(shè)計建議區(qū)域。

建議橫向排列的區(qū)塊數(shù)量最多四個，最少一個，以保證視覺層面的舒適感。

注：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。

柵格公式：

我們?yōu)轫撁嬷袞鸥竦?Gutter 設(shè)定了定值，即瀏覽器在一定范圍擴(kuò)大或縮小，柵格的 Column 寬度會隨之?dāng)U大或縮小，但 Gutter 的寬度值固定不變。

網(wǎng)站展示頁和 Dashboard 的 Gutter 寬度為 24px。

列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。

以上就是關(guān)于ui設(shè)計流程進(jìn)行的第一步是什么相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。