-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當前位置：首頁 > 創(chuàng)意學院 > 空間設計 > 專題列表 > 正文
圖形設計
界面設計
交互設計
設計規(guī)范
動效設計
ui設計流程進行的第一步是什么（ui設計流程進行的第一步是什么意思）
發(fā)布時間：2023-04-28 02:43:37
稿源：
創(chuàng)意嶺 閱讀：
439
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于ui設計流程進行的第一步是什么的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內優(yōu)秀企業(yè)，服務客戶遍布全國，設計相關業(yè)務請撥打175-8598-2043，或微信：1454722008
本文目錄:
一、什么是UI？它的設計原則是什么？
什么是UI？
UI即User Interface（用戶界面）的簡稱。UI設計則是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟件變得有個性有品味，還要讓軟件的操作變得舒適、簡單、自由、充分體現(xiàn)軟件的定位和特點。UI還有其它的意義，如Unit Interval，Univ of Iowa，Unlock Instruction，Urgent Interrupt。
UI的設計原則是什么？
1.簡易性
界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。 2.用戶語言
界面中要使用能反映用戶本身的語言，而不是游戲設計者的語言。
3.記憶負擔最小化
人腦不是電腦，在設計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定，24小時內存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。
4.一致性
它是每一個優(yōu)秀界面都具備的特點。界面的結構必須清晰且一致，風格必須與產(chǎn)品內容相一致。
5.清楚
在視覺效果上便于理解和使用。
6.用戶的熟悉程度
用戶可通過已掌握的知識來使用界面，但不應超出一般常識。
7.從用戶習慣考慮
想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實與虛擬)的事物，完成更好的設計。如：書籍對比竹簡。
8.排列
一個有序的界面能讓用戶輕松的使用。
9.安全性
用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。
10.靈活性
簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標、鍵盤或手柄、界面)。
11.人性化
高效率和用戶滿意度是人性化的體現(xiàn)。應具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習慣定制界面，并能保存設置。
二、零基礎如何學習UI設計？
零基礎如何學習UI設計？在現(xiàn)目前UI設計是一個非?；鸬男袠I(yè)，很多人都認為UI設計可以拿高薪，便擠破腦袋的想要入門。在你接觸UI之前，首先需要給自己一個定位，是否是真正的喜歡UI，不管做什么行業(yè)，喜歡、興趣是第一的，只有這樣下一步.
那如果學習UI我們要怎么去進行呢？
首先你總得知道UI是什么吧？
1、什么是UI（直接百度）
UI，即用戶界面（User Interface）是系統(tǒng)和用戶之間進行交互和信息交換的媒介。它實現(xiàn)信息的內部形式與人類可以接受形式之間的轉換。
簡而言之，UI設計師就是設計用戶界面。一般我們手機上app的界面都是UI設計師需要設計的。
通俗易懂點說，UI就是做界面的，最重要的部分是app界面，看到手機里各種app沒？大部分展現(xiàn)在你面前的東西，都是UI設計師需要做的。
當你理解了什么是UI的時候那么接下來我們要知道我們要會使用什么軟件？
2、UI設計師需要會哪些軟件
需要軟件和基礎學習的小伙伴可以到文件夾中下載哦！
分別是Photoshop，Illustrator，After Effects，Axure RP 8。
簡稱，PS，AI，AE，ARP軟件。
PS主要用于制作UI設計中界面和圖標設計，也可以對UI中的一些廣告頁進行設計。
AI主要用于制作UI設計中的圖標設計，也可以對UI中的一些引導頁的插畫圖進行設計。
AE主要用于制作UI設計中的交互動效，在現(xiàn)今的UI產(chǎn)品中很多都是需要用動效的。
ARP主要用于制作UI設計中的原型圖，線框圖，流程圖的設計。
說了那么多廢話，那應該怎么學習呢？
第一個，練習軟件基礎知識，現(xiàn)在網(wǎng)上有很多這樣的軟件基礎知識視頻，先把軟件理解之后我們在來開始創(chuàng)作練習。
第二個，學習手繪知識，很多人覺得沒有手繪知識，我也可以做UI設計，
但是手繪能帶給我們的是
1.鍛煉我們理解物體的形體、輪廓、明暗的思維。
持續(xù)的繪畫練習，除了排線這些硬性的技巧，同時就是在鍛煉我們對畫面的專業(yè)思考能力，觀察和發(fā)現(xiàn)細節(jié)的習慣，而有這樣的思維訓練，在以后我們繪制圖形、圖標、擬物風格作品的時候才能快速抓到要點。
物體的明暗關系，物體間交匯的陰影，各物體的輪廓，前后景的景深，畫布的褶皺方式等……而這都是有意識的思考后動手才能完成的結果，構成一幅平穩(wěn)準確細節(jié)豐富的作品。
這也是為什么很多人講，不知道如何去提升，其實這就是一個關鍵點
2.學會構圖
你需要把內容完整畫進紙上，就需要在畫布也做構圖，是用居中還是三角，黃金三分還是螺旋，無論通過什么手段，最終都是找到一個你覺得好看的位置。而這個過程也是平面構成的實踐操作。在未來如果學習攝影也會有良好的助力！
這會鍛煉你的主視覺和排版的能力。
第三個，學習UI的設計理論
，軟件只是一種工具，設計才是最終要體現(xiàn)的，這個時候你需要多看關于這方面的書籍。
先要了解的是三大構成（百度百科）即三大構成即平面構成、色彩構成與立體構成，是現(xiàn)代藝術設計基礎的重要組成部分。
設計類的相關書籍可以買一些回來，比如《商業(yè)字體設計》、《版面設計的原理》等等，網(wǎng)上一搜就很多
第四個，前端的對應技能，作為UI設計師，是必須掌握前端的對應技能的，這不是可以完全無限制的發(fā)揮設計技藝的地方，你就要有取舍，要跟的上前端開發(fā)的邏輯，做出穩(wěn)定可以被實現(xiàn)的設計稿，必須掌握前端切圖流程。學會HTML5 CSS3 JQ的入門，安卓、IOS的實現(xiàn)規(guī)范！
第五個，那就是創(chuàng)作，我們先要從別人的身上吸收內容，簡單的來說就是抱大腿，進行臨摹，然后在進行創(chuàng)作，尋找到一個適合自己的風格
需要從以下方面來進行創(chuàng)作學習
最后一個那就是思維拓展，你要想走到時代的前沿，那你必須得多了解世界，了解其他行業(yè)的相關內容，尤其是現(xiàn)在的人，都很討厭學習，你一樣，我也一樣，這是現(xiàn)在這個社會的通病，互聯(lián)網(wǎng)充斥這我們的每一天，所以我們需要給自己制定一個目標，然后實施計劃，嚴格的執(zhí)行，在這過程中不斷修正自己的計劃，最后達到自己想要的結果，如果你想要做那么請請拿出你的態(tài)度。
學習ui你需要了解的知識
三、UI設計師如何與產(chǎn)品經(jīng)理以及開發(fā)協(xié)同合作？
一般工作流程是：
1.產(chǎn)品經(jīng)理(PM)提出產(chǎn)品方面的需求，輸出PRD(產(chǎn)品需求文檔)和原型圖，并發(fā)起需求評審會議。
2.交互設計師接到PRD文檔后進行梳理和確認，將模糊的需求和功能具體化，制作出低保真交互流程圖和頁面的結構信息框架，并以文字標注的形式進行交互說明，最終輸出交互規(guī)范文檔，并召開交互評審會議。
3.UI設計師接到交互文檔后，第一步并不是馬上動手去做，而是要先對需求進行理解，理解該產(chǎn)品的功能內容是什么?服務的人群有哪些特征?產(chǎn)品的目標是什么等等。有疑問的地方及時與PM或交互設計師進行溝通，最終達成對產(chǎn)品目標的一致理解;第二步，找競品。對競品的色彩搭配、結構布局、icon設計、字體規(guī)范等方面進行研究和分析，可作為參考借鑒，但不要抄襲;第三步，視覺設計。到這一步就可以真正開始動手做了，按照產(chǎn)品的需求，對重要功能和內容進行突出，弱化次要內容，注意整個頁面的層級結構和比例關系，保持美觀性和易用性之間的平衡。設計過程中參照移動端和PC端的設計規(guī)范，遵循一致性設計原則。
第四步，交付。在與PM和設計主管確認設計稿ok后，對頁面進行標注和切圖的輸出。切圖根據(jù)需要，對于iOS系統(tǒng)，需要提供1倍圖、2倍圖、3倍圖，同時注意切圖的命名規(guī)范(網(wǎng)上有很多關于切圖命名規(guī)范的文章，這里不再贅述);對于android系統(tǒng)，主要提供hdpi、xhdpi、xxhdpi、xxxhdpi尺寸的切圖，特殊情況還需要提供點九圖。
4.開發(fā)工程拿到標注稿和切圖后，對開始對頁面框架進行搭建。這時候，UI設計師的工作并沒有結束，跟進和驗收也是UI設計工作的重要組成部分，即要保證設計稿的還原度。中途若出現(xiàn)問題，也要及時配合開發(fā)小伙伴一起解決。一個優(yōu)秀的UI設計師，除了關注設計執(zhí)行上的工作以外，前期的設計規(guī)劃和后期的迭代跟進同樣需要關注。
以上就是青藤小編關于UI設計師如何與產(chǎn)品經(jīng)理以及開發(fā)協(xié)同合作的相關分享，希望對大家有所幫助，如果您想要了解更多相關內容，歡迎大家及時在本平臺進行查看哦!
四、前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是后續(xù)展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優(yōu)先級及內容特點，選擇合理布局。
一、常用布局
網(wǎng)站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助于讓用戶快速找到適合自己產(chǎn)品的頁面布局。
1、網(wǎng)站展示頁
網(wǎng)站展示頁（即官網(wǎng)頁）通常是用戶了解網(wǎng)站或產(chǎn)品的第一步。這類頁面通常會包含產(chǎn)品展示圖，簡短的產(chǎn)品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產(chǎn)品圖片，有助于加深用戶對產(chǎn)品的理解和記憶。
2、控制臺頁
控制臺頁（Dashboard）集合了大量多樣化的信息（如數(shù)字，圖形，文案等），需要一目了然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數(shù)據(jù)可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是并列式展現(xiàn)信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據(jù)用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易于閱讀與理解。它的易讀性，便捷性，易操作性對產(chǎn)品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利于提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優(yōu)突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數(shù)據(jù)，或每一橫列數(shù)據(jù)有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區(qū)分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態(tài)信息。對于信息效率和優(yōu)先級判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易于閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執(zhí)行登錄、注冊、預定、下單、評論等任務，是產(chǎn)品中數(shù)據(jù)錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背后的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多余的輸入項）；
標簽的命名要易于用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利于用戶的完成操作。
二、柵格
我們通過定義網(wǎng)格、間距來呈現(xiàn)產(chǎn)品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區(qū) 750px』，PC：『頁面總寬 1440px，內容區(qū) 1208px』）來設定，并在此基礎上以 12等分的柵格來劃分整個設計建議區(qū)域。
建議橫向排列的區(qū)塊數(shù)量最多四個，最少一個，以保證視覺層面的舒適感。
注：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們?yōu)轫撁嬷袞鸥竦?Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網(wǎng)站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
以上就是關于ui設計流程進行的第一步是什么相關問題的回答。希望能幫到你，如有更多相關問題，您也可以聯(lián)系我們的客服進行咨詢，客服也會為您講解更多精彩的知識和內容。
推薦閱讀：
mbr和gpt分區(qū)的區(qū)別（固態(tài)硬盤用mbr還是guid分區(qū)）
老婆偷偷和抖音男網(wǎng)友聊天（老婆偷偷和抖音男網(wǎng)友聊天被我發(fā)現(xiàn)離家出走了）
贛公網(wǎng)安備 50019002502384號
