當前位置:圖趣網(Tuquu) > 網頁設計教程 > 設計理論 > 寫給新手的APP結構指南

想成為互聯網設計師?先來看這篇超周全的介紹!

編者按:本文專門寫給沒入行的設計新手,不僅介紹了一個設計團隊的分工,還有團隊成員的工作、常見名詞和軟件等,絕對是新手入門最好的基礎科普手冊!

一、互聯網視覺設計師

UI設計師是什么呢?UI 是 User Interface Design(即界面設計)的簡稱。這個界面可以是手機界面,網站界面,軟件界面,智能設備界面等統(tǒng)統(tǒng)人機交互可視化序言。人機交互指的是人類與計算機的交流,這種交流大家可以想見從最早的圖靈計算機寄托紙條來和計算機交流,到我們如今形形色色的屏幕上的按鈕,再到我們如今的各類語音交互,以及像科幻電影一樣的 AR、VR 或各類腦電波交互,這都是人與計算機越來越方便的溝通體例??墒侨伺c計算機目前最高效的溝通照舊停頓在屏幕上,屏幕仍然是人機交互體例中最有用率的,如許的交互界面必要由我們來設計成更有用率和讓用戶能夠看懂的界面,讓通俗大眾更好的理解計算機的意圖,這就是我們的職責了??偨Y一下:UI設計師的職責是設計供人機交互使用的圖形化用戶界面,并使界面更加易用和友愛。



△ 早期采用GUI設計的Xerox 8010 Star

我們完成的圖形化界面又叫 GUI(Graphic User Interface),它的要求是必要有易用性(Easy to use),即界面不必要復雜地思索即可容易地使用;友愛(Friendly),即對用戶特別很是友愛,容易理解。一個好的 GUI 應該是易用和友愛的,比如我們手機上的微信和付出寶等熟知的 APP。因為互聯網的發(fā)展許多行業(yè)被重新整合:設計師也被重新定義了。UI設計、動效設計、交互設計、平面設計被漸漸整合成了一個職業(yè),這個職業(yè)不能單純地設計界面和排版,還必要能繪制圖形、掌握平面能力、懂交互等,這個職業(yè)有了不同的名字,比如全鏈路設計師、全棧設計師等,但是我認為合適的稱呼是:互聯網視覺設計師。目前國內名企雇用時也會使用這一詞匯來強調與只會排版和套用規(guī)范的界面設計師。互聯網視覺設計師擔負著我們這個時代的主流序言:互聯網的設計。那無論叫什么,我們的職責沒有改變:解決人機交互的題目。



△ iPhone界面中的UI設計

互聯網視覺設計師或 UI設計師一樣平常倚賴于互聯網產品團隊之中,而不像平面設計師或服裝設計師一樣成立許多平面設計公司。所以我們打交道的人不肯定都是偕行,而可能是互聯網從業(yè)者中的其他角色,如產品經理、程序員、技術團隊、運營團隊等。假如我們在的團隊不光是設計師,那么我們就要有充分地表達能力和耐心讓周遭的人理解我們的工作?;ヂ摼W視覺設計師的工作重要有移動端設計、網站設計、運營設計等。現在隨著 UI設計師的數量越來越多,行業(yè)越來越成熟,UI設計師所必要肩負的責任越來越多。如必要了解交互知識、懂平面設計、擅長手繪等。那么 UI 的定義越來越雄厚,如今想成為 UI設計師的門檻越來越高。

二、互聯網的產品團隊



△ 美劇《硅谷》中的創(chuàng)業(yè)團隊

互聯網公司的產品線是一個流水線?;ヂ摼W產品團隊指的是整個團隊圍繞著一個產品打造,并且以設計開發(fā)完成該產品為目標的團隊。比如微信團隊、付出寶團隊等?;ヂ摼W產品有可能是移動端,也可能是電腦端。也可能同時開展多個產品線等。我們按部門可以把他們分為:管理層、產品部、研發(fā)部、市場部。設計團可能單獨成立部門也可能融合在產品部門里?;ヂ摼W產品團隊按角色可分為:

1. 高層(leader)

一個團隊的領袖,由董事會、董事會主席、首席實行官CEO(Chief Executive Officer)、首席技術官 CTO(Chief Technology Officer)等組成。決策公司的關鍵事物。

重要輸出:idea

使用軟件:Office

2. 用研團隊 UR(User Research)

通過用戶研究的手段調查老板的想法靠不靠譜。用研團隊保障著公司與用戶之間的聯系,確保研發(fā)的產品是用戶所喜好的。研發(fā)之前、研發(fā)之中、研發(fā)之后的反饋都必要用戶研究團隊及時參與收集數據等。

重要輸出:用戶研究報告

使用軟件:Office、眼動儀等

3. 產品經理 PM(product manager)

產品經理細化產品邏輯,產品經理或交互設計師設計原型圖,原型圖用來和老板匯報和交付設計師。負責產品從無到有的企劃。產品經理首先的職責是在產品策劃階段向管理層提出產品文檔。產品文檔 PRD 通常包括產品的規(guī)劃、市場分析、競品分析、迭代規(guī)劃等。然后在立項之后負責進度的把控、質量的把控和各個部門的和諧工作。在產品管理中,產品經理是領頭人,是和諧員,是鼓動者,但他并不是老板。作為產品經理,雖然針對產品開發(fā)自己有很大的權力,可以對產品生命周期中的各階段工作進行干預,但從行政上講,并不像一樣平常的經理那樣有本身的部屬,但他又要調動許多資源來做事,因此如何做好這個角色是必要相稱技巧的。

重要輸出:產品需求文檔(PRD)、市場需求文檔(MRD)、原型圖(Layout)等

使用軟件:文檔書寫軟件(Office)、原型圖軟件(Axure、藍湖、墨刀等)

4. 項目經理(Project manager)

從職業(yè)角度,是指企業(yè)建立以項目經理責任制為核心,對項目執(zhí)行質量、安全、進度、成本管理的責任保證系統(tǒng)和周全進步項目管理水平設立的緊張管理崗位。項目經理是為項目的成功策劃和實行負總責的人。這個職位許多公司里可能都是由產品兼顧。項目經理負責的是進度的把控和項目題目的即時解決。

重要輸出:項目進度表

使用軟件:文檔書寫軟件(Office)

5. 交互設計師 UX 或 UE(User Experience Designer)

把產品需求文檔(PRD)優(yōu)化成可交互的原型圖給設計師和技術。

重要輸出:交互圖(prototype)

使用軟件:Axure RP、藍湖、墨刀、Adobe XD等

6. 互聯網視覺設計師或 UI設計師(User Interface Designer)

互聯網設計師不僅僅是給原型上色,設計師會根據現實具象內容和詳細交互修改板式,甚至重新定義交互等。同時要提供應技術切圖或 PSD。一些出現過的別名:美工、全鏈路設計師、全棧設計師、UID、UI設計師、視覺設計師等等都是在說我們。接到原型圖或交互圖后,我們會根據原型圖的內容來進行交互優(yōu)化、排版、視覺設計。最終和總監(jiān)確認后交付開發(fā)人員。假如是對接頁面項目的話,我們只必要交付給開發(fā)人員:PSD、規(guī)范。假如是對接移動端項目的話,那么我們必要交付給開發(fā)人員:切圖、標注、規(guī)范。為什么給頁面開發(fā)的工程師(前端)不必要切圖而直接給 PSD 即可呢?由于前端工程師其實最早和我們的職位一路并稱美工,是有 PS 操作能力的。

重要輸出:設計稿、設計規(guī)范、切圖、標注等。

使用軟件:Sketch、Ps、Ae、Ai 等。

7. 前端開發(fā) RD (Research and Development engineer)

開發(fā)人員稀有據庫端和用戶端兩種,一樣平常來說我們接觸的是用戶端開發(fā),他們負責還原設計。那么做頁面端的用戶端開發(fā)的工程師叫做前端工程師;做安卓設備開發(fā)的叫 Android工程師;做蘋果設備開發(fā)的叫 iOS工程師。他們都指的是用戶端的開發(fā),用戶端就是我們看到的統(tǒng)統(tǒng)界面。目前用戶端我們接觸的就是頁面、安卓、iOS 三種主流設備,他們開發(fā)使用的代碼不一樣,所以對有些特別結果如動效、陰影等的支持有所不同。

8. 后端工程師或程序構架師 RD (Research and Development engineer)

后端工程師重要負責什么呢?后端工程師或叫程序構架師的重要工作是做數據存儲。我們平時使用產品中產生的數據,如:頭像、昵稱、聊天、對話、圖片等,均是通過互聯網傳輸到服務器再交換信息分發(fā)回去,那么這些資料存儲的架構都是后端工程師的工作。然而遺憾的是,設計師與后端工程師的接觸沒有太多。

9. 運營或市場拓展 BD

產品完成后進入運營階段,可能會根據運營調整產品設計或設計運營圖等需求。運營更加直接面對市場,所以對市場的目的也更加明確。以此推倒出市場和運營的目的每每更加直接。而偶然運營的目的紅利和產品以用戶為中間的思想會有沖突,這時對設計師的要求就更高了,如何調節(jié)設計審美、運營目的、以用戶為中間幾種目的就成了設計師的難題。

10. 測試工程師 QA

測試工程師在企業(yè)中一樣平常稱為軟件開發(fā)測試工程師(Software Development Engineer in Test,SDET)。一樣平常為具有1-2年經驗的測試工程師或程序員。有優(yōu)秀經驗的測試工程師可以成長為產品/項目組的測試組長(SDETLead)或軟件質量經理(SQA Manager),負責軟件質量保證,進行測試管理和向導測試團隊。測試工程師的職責就是把控軟件的質量。主管與客觀的都會進行把控,包括體驗與視覺部分。但是通常設計師必要與測試工程師合作來完成對產品視覺部分還原度的測試工作。

11. 大型互聯網公司



△ 大型互聯網公司結構圖

大型互聯網公司人員配備較為齊全:高管負責決策、用研團隊負責研究用戶對于產品的反饋、產品經理負責制訂產品發(fā)布的時間表、交互設計師負責優(yōu)化交互圖、視覺設計師優(yōu)化交互并設計視覺后輸出切圖和標注并且完成設計規(guī)范、前端工程師負責實現界面還原和與數據庫的對接、后端工程師負責程序構架和數據庫結構、測試工程師負責測試整個程序是否可用、商務部門負責后期運營。除了完備的產品線外,大型互聯網公司還配備了人力資源部門、后勤部門、和諧部門等,分工很成熟。但是每每會出現大公司病,舉措比較緩慢。注:此圖為產品流程的重要關系圖,真實的工作中關系錯綜復雜,并不只是線性順序。

12. 中型互聯網公司



△ 中型互聯網公司結構圖

中型互聯網公司人員配備中等:高管負責決策、產品經理負責制訂產品發(fā)布的時間表和交互圖、視覺設計師優(yōu)化交互并設計視覺后輸出切圖和標注并且完成設計規(guī)范、前端工程師負責實現界面還原和與數據庫的對接、后端工程師負責程序構架和數據庫結構、測試工程師負責測試整個程序是否可用、商務部門負責后期運營。中型互聯網公司人員也比較劃一,可是會缺少許多精致的地方,設計師會承擔更多的責任。

13. 小型互聯網公司



△ 小型互聯網公司結構圖

小型互聯網公司人員配備較為齊全:高管負責決策和擔負產品經理的角色、視覺設計師優(yōu)化交互并設計視覺后輸出切圖和標注并且完成設計規(guī)范、前端工程師負責實現界面還原和與數據庫的對接、后端工程師負責程序構架和數據庫結構、測試工程師負責測試整個程序是否可用。小型互聯網公司人員很少,決策很快,但是因為每小我負責的部分太大,所以經常有學雜而學不精的地方,并且人員較少所以提高更加寄托本身。

三、分工

1. Leader的工作

找投資:作為一個團隊的領袖,第一要務是解決團隊生存題目。所以投資是一個在產品沒有完成紅利模式構建之前的好方法。我們在面試時總會看到某公司處于 A輪或者 B輪融資階段。這是什么意思呢?投資根據項目成熟度分為:路演、天使輪、A輪、B輪、C輪、上市等狀況。隨著投資的階段也代表著項目的成熟度。這一點大家也可以在找工作時加以權衡。

招合伙人:一個好的團隊領袖不應該事事躬親。除了 CEO 之外還應該找到 CTO、CTOO 等多個高管的人選。



△ 創(chuàng)業(yè)咖啡文化成為熱潮,圖為北京某咖啡館內浩繁創(chuàng)業(yè)團隊在工作。來源:網絡

2. 用戶研究的工作

用戶研究的體例重要有以下幾種:

可用性測試:通過篩選讓不同用戶群來對產品進行操作,同時觀察人員在旁邊觀察并記錄??捎眯詼y試的要求是用戶不可以是互聯網從業(yè)者而應該是真實產品的用戶群體。

焦點小組:一樣平常有6-12人組成,由一名專業(yè)人士主持,依照訪談提要指導小組成員各抒己見,并記錄分析。并且在焦點小組的房間里會有一扇單向玻璃窗,用戶是看不到里面有誰的。而在里面坐著的通常是開發(fā)團隊,他們可以清晰地看到用戶是如何吐槽他們的產品的,但是他們沒有權利直接和用戶進行詮釋。

問卷調查:可分為紙質調查問卷、網絡問卷調查。依據產品列出必要了解的題目,制成文檔讓用戶回答。問卷調查是一種成本比較低的用戶調查方法。

用戶訪談:邀約用戶往返答產品的相干題目,并記錄作出后續(xù)分析。用戶訪談有三種情勢:結構式訪談(根據之前寫好的題目結構)、半結構式訪談(一半根據題目一半討論)、開放式訪談(較為深入地和用戶交流,雙方都有自動權來探究)。用戶訪談設置時要細致:用戶不可以是互聯網從業(yè)的專業(yè)人員、不可以提出誘導性題目、不要使用專業(yè)術語。

眼動測試:使用特別的設備:眼動儀來追蹤用戶使用產品時眼睛聚焦在哪里,盲區(qū)是哪里。比如一個網站通過眼動測試可以知道用戶的視覺會主動屏蔽網站的常見廣告位置,這時假如盼望進步廣告的點擊,就必要把廣告位放置于用戶聚焦時間較長的位置。眼動測試的設備比較專業(yè),通常在小公司較難開展。

用戶畫像:根據產品的調性和用戶群體,用戶研究團隊可以設計出一個用戶的模型,這種研究的體例被稱為用戶畫像。用戶畫像是由帶有特性的標簽組成的,通過這個標簽我們可以更好地理解誰在使用我們的產品。用戶畫像建立后,每個功能可以完成本身的用戶故事:用戶在什么場景下必要這個功能。以此,我們所設計的功能就會更接近用戶現實的必要。

用戶反饋和大數據分析:根據市場提供的反饋和數據得出客觀的判斷和合理的推斷。用戶反饋也是用戶研究的一個重點,用戶反饋重要是用戶通過產品的反饋入口自動向開發(fā)者提出的意見。



△ 圖為美劇《硅谷》中 焦點小組測試橋段

3. 產品經理的工作

產品經理負責和諧整個團隊的進程,工作十分復雜。產品經理與整個團隊都要打交道。

產品經理的產出很大一部分是在溝通和和諧上。假如單純提煉輸出文件,有以下幾種:

PRD:即「產品需求文檔(Product Requirement Document)」,此文檔的受眾是項目組、開發(fā)組、測試組、策劃組、體驗組等等人員。文檔中表述了此產品的概念,規(guī)劃了產品各個步驟的完成時間,產出內容包括產品界面、產品流程、功能需求、測試需求、體驗需求等。

MRD:即「商業(yè)需求文檔(Business Requirement Document)」。此文檔的受眾是商務、運營、市場等人員。文檔表述的是產品的營業(yè)模式,明確產品的用戶人群,產出內容包括產品模式、營業(yè)模式、運營模式市場模式等。

原型圖:也稱為線框圖,即用線條、圖形繪制出的產品框架。



△ 圖為產品需求文檔PRD模板

4. 交互設計師的工作

交互圖:體現出操作舉動后,對象之間的的關系,和觸發(fā)的下一步信息。與產品經理設計出來的線框圖或原型圖不同的是,交互設計師完成的交互圖更加精致,并且可以在手機上運行,模仿 APP 完成以后的使用。



△ 圖為交互圖案例

5. UI設計師的工作

優(yōu)化原型圖:根據詳細視覺元素對交互圖提出優(yōu)化方案。

視覺設計:依據人機交互、操作邏輯等原理,對原型圖進行界面的設計與美化。

切圖:根據不同平臺尺寸,輸出響應倍數的圖片。

標注:行使工具在輸出網頁上標注各個元素之間的尺寸與情況備注。

項目走查:開發(fā)完成后,選擇主流機型進行畫面審查工作。

視覺總結:對設計作品中的字體、字號、顏色、icon、模塊等元素做出展示并說明。



△ 圖為UI設計稿

6. 前端工程師的工作

頁面前端工程師:完成頁面前端界面的編程工作。從視覺設計師手中接過 PSD 后切圖并用頁面代碼重新組建好網頁,并且和數據庫端給到的接口聯調,沒題目后放到服務器上網站就可以訪問了。使用的代碼語言重要有:HTML、CSS、JS 等。

蘋果軟件工程師:完成 iOS 平臺上 app 的程序開發(fā),并從視覺設計師手中接過切圖和標注,完成客戶端編譯,并和后端工程師聯調后上線。重要使用的代碼語言有:Object-C、Swift 等。

安卓軟件工程師:也稱為 Android 開發(fā)工程師。完成安卓平臺上 APP 的開發(fā),并從視覺設計師手中接過切圖和標注,完成客戶端編譯,并和后端工程師聯調后上線。重要使用的代碼語言有:java、Kotlin 等。



△ 圖為前端HTML代碼

7. 后端工程師的工作

數據庫編程:分為網狀數據庫、條理數據庫、關系數據庫,重要行使數據庫編程來存儲管理數據。重要使用的語言有:PHP、JSP、JAVA 等。



△ 圖為后端編譯部分代碼

8. 測試工程師的工作



△ 圖為黑盒白盒測試漫畫詮釋 來源:網絡

黑盒測試:以用戶角度測試,摸黑測試。這個測試方法就是按照用戶的視角摸黑測試。

白盒測試:按照產品需求文檔的功能點一一測試。

灰度測試:直接給30%的用戶發(fā)送新版本升級,70%用戶沒有發(fā)放灰度包。這種測試方法就是把我們的產品直接發(fā)放給部分用戶來聽取反饋意見。

9. 運營人員的工作

運營項目:運營的詳細手段重要分為:渠道運營、內容運營、活動運營、品牌運營。即通過各種手段進行不同的組合,將用戶與產品更好的連接,得到特定數據的增加,并完美產品價值、持續(xù)其商業(yè)價值。



△ 五谷雜糧 運營圖插畫 作者:馮珊珊

10. 維護人員的工作

維護產品所必要硬件的狀況。包括但不限于:

服務器:即提供計算服務的設備。服務器的組成包括處理器、硬盤、內存等,與通俗計算機類似,但是它的性能更壯大、更穩(wěn)固。一個互聯網公司的服務器一樣平??梢砸揽吭诜掌鬓r場里或者放在公司內部。假如不是寄存那么就必要維護人員實時去關注。

域名:(Domain Name),將 ip 地址轉化為便于人們記憶的英文名稱等。域名是按年收費的。

11. 人力資源的工作

雇用:重要流程是確定人員需求、制訂雇用計劃、發(fā)布信息、人員甄選、辦理入職等工作。

離職:重要流程是告知離職信息、預備離職面談、辦理相干離職手續(xù)、配合交接工作、資料存檔等工作內容。

福利薪酬管理:制訂企業(yè)員工的福利薪酬制度,日??记?、績效考核、福利發(fā)放等工作。

四、產品設計思維 UED

1. UED

我們老聽 UED。UED 就是:User Experience Design(用戶體驗設計)的簡稱。UED 是進行產品策劃的主力之一,他們用本身的知識、經驗、設計能力拿出設計方案。能夠用本身的互聯網知識來設計出行業(yè)專家想實現的操作,而付諸以商業(yè)營銷。UED 團隊包括:交互設計師(Interaction Designer)、視覺設計師(Vision Designer)、用戶體驗設計師(User Experience Designer)、用戶界面設計師(User Interface Designer)和前端開發(fā)工程師(Web Developer)等等。

UED 是以用戶為中間的一種設計手段,以用戶需求為目標而進行的設計。設計過程看重以用戶為中間,用戶體驗的概念從開發(fā)的最早期就開始進入整個流程,并貫穿始終??梢?,UED 并不是一個特指,而是指的是全體互聯網產品團隊的一種思維,就是以用戶為中間來做設計。這種理念貫穿到設計、代碼、運營等方方面面。UED 是一個以用戶體驗為原則的團隊。

2. UCD

UCD 是什么?UCD(User Centered Design)是指以用戶為中間的設計。是在設計過程中以用戶體驗為設計決策的中間,強調用戶優(yōu)先的設計模式。在進行產品設計、開發(fā)、維護時從用戶的需求和用戶的感受出發(fā),圍繞用戶為中間進行產品設計、開發(fā)及維護,而不是讓用戶去適應產品。無論產品的使用流程、產品的信息架構、人機交互體例等,以 UCD 為核心的設計都時刻高度關注并考慮用戶的使用風俗、預期的交互體例、視覺感受等方面。



衡量一個好的以用戶為中間的產品設計,有三個維度:

  • 產品的有用性(effectiveness)

  • 產品的服從(efficiency)

  • 用戶主觀寫意度(satisfaction)

分外說明:大家可能老誤會 UED 和 UCD 是某個部門的緣故原由是由于許多大公司都設置了用戶體驗部門,如騰訊網UED、阿里巴巴國際UED等團隊。所以 UED 和 UCD 不光特指某一個部門,更是一種團隊的模式。

五、設計師必備能力

經過我們對上文的閱讀,我們知道了互聯網視覺設計師在團隊中的重要職責。歸納一下,我們的工作重要是:第一,根據原型圖和 PRD 文檔優(yōu)化原型圖和交互圖的交互設計;第二,根據需求完成視覺設計并完成設計規(guī)范;第三,根據技術的需求完成切圖、標注、命名PSD、設計動效等工作;第四,偶然還會擔負起公司的運營設計和企業(yè)形象設計或者公司內部的平面設計等。我們的工作越來越復雜,這就要求我們掌握的知識也要越來越多。



△ 目前互聯網設計師必要具備的三種能力

互聯網設計師重要必要掌握的能力重要是以下幾種:排版能力,交互知識,圖標繪制,插畫繪制,手繪,運營圖設計能力,專題設計能力,網站設計能力,移動端規(guī)范,基本代碼原理,展示作品的能力, PPT設計能力,表達能力,H5設計能力,LOGO設計等。

六、UI設計師所使用的軟件

1. 界面設計軟件



Adobe Photoshop 簡稱 PS。三十年老店不會讓你失望。來自一個行業(yè)具有壟斷地位的公司的益處是你不用憂慮研發(fā)公司倒閉而軟件制止更新,同樣因為開發(fā)公司的實力所以 PS 支持 Windows 平臺和 Mac 平臺。這個益處是毋庸置疑的了。PS 的版本三十年中數不勝數,而我們應該永久學習最新的版本。而且 PS 是 Sketch 和 AI 無法代替的,它的像素圖形處理,它設計運營圖與其他圖像的能力無所匹敵。



Adobe Iullstrator 簡稱 AI。同樣來自母公司 Adobe,擁有比 PS 稍微年輕一點的歷史。因為他們都是 Adobe 旗下的軟件,所以兩個軟件可以互通甚至直接拷貝,那么配合度要比不同廠家的軟件高得多了。PS 在 UI設計中重要負責界面設計和圖形處理,AI可以負責線性圖標的設計,設計后直接拷貝進 PS 里即可。不能直接用 AI 作圖的緣故原由是 AI 不具備切圖和標注與團隊合作等多種 PS 可以輕松辦到的事情。



看完了上兩種軟件你肯定照舊心有不甘盼望用 AI 的矢量作圖功能,配合 PS 可以切圖標注的擴展性對吧,那么就誕生出了 Sketch 這款軟件。在作圖的功能上更加接近 AI,擁有矢量圖形功能,而切圖標注甚至比 PS 更加方便快捷。遺憾的是它并非 Adobe 出品,所以和 PS 與 AI 的協作上差了一些。并且因為不是大公司出品總有一些不放心:比如與蘋果決裂后,Sketch 必要在官方購買并安裝軟件包而并非直接從蘋果下載;比如因為 PC 盜版緊張臨時在 Windows 體系下是不可用的等等。但是總之這款軟件如今很受 UI設計師喜好。



Adobe XD 全稱 Adobe Experience Design。集原型、設計和交互于一體的設計軟件。 傳言將會是 skech 的勁敵。廠商背景決定了它支持 Windows 操作體系,而且 XD 的上風是原型圖和設計都可以搞定。所以在國外比較流行,國內設計業(yè)界鮮有偕行使用,所以不是必學。



Adobe Fireworks 列出來這款軟件并不代表大家要學習,由于這款初心是為頁面設計師所設計的軟件已經退役了。

2. 動效軟件



Adobe After Effects 因為同樣來自 Adobe,所以該軟件和 PS 與 AI 都可以直接導入,互通有無。這一點特別很是的爽。但是本軟件的初心并不是做 UI 的動效設計,而是影視后期。所以首先我們的限定是使用這款軟件完成的動效只可以沿著時間線播放,而不可以交互。其次這款軟件復雜的插件也都是為了影視后期而設計的,對于新手學習比較難。但是總體來說照舊一款大家必學的軟件。



Sketch 沒有動效,小伙伴怎么辦?別發(fā)急,Princple 出現了。這款軟件可以直接點擊大鉆石導入 Sketch 文件并設計出在手機可交互的動效,堪稱 UI設計師的福音。但是不足之處和 Sketch 一樣,就是不支持 Windows 體系。



Flinto 交互原型利器,只可以 Mac 平臺使用。



Origami 交互原型和動效的一個輕便的工具,同樣只可以 Mac 平臺使用。



Framer 交互設計和原型圖設計工具,偏代碼方向。只可以 Mac 平臺使用。

3. 原型圖工具



墨刀,國產原型圖工具,語言上風加上服務器速度相應快,而且是一款 Web 應用,也就是說通過欣賞器訪問網站即可設計出原型圖來。



Axure RP 老牌產品經理原型圖工具,有多式多樣的插件可以實現多種結果的原型圖。

4. 前端工具



Adobe Dreamweaver 前段編譯工具,Adobe 生產,有設計和代碼模式。



Adobe Muse Adobe 公司生產的網站開發(fā)工具,支持可視化設計,并且生產出頁面前端代碼。

七、好UI的標準是什么?



1. 好用

以用戶為中間

2. 功能清晰

Don’t make me think

3. 悅目

  • 知足用戶畫像群的審美

  • 達到需求方的目的

  • 比要求完成的更美;審美教育任務

4. 好實現

  • 可以實現:設計須可以實現

  • 服從:須考慮對載體服從和性能的影響

  • 為實現設計:回頭根據實現角度調整

無論做什么,只要你擁有一套好的方法論加上刻意演習都會獲得很好的效果?;ヂ摼W設計是崇尚經驗的工作,隨著經驗的積累和方法論的沉淀,我們肯定能夠取得不錯的提高。盼望真正喜好互聯網設計的人都能夠實現本身的職業(yè)目標。

迎接關注作者的微信公眾號:「西見」


圖片素材作者:Dmitrij


[教程作者:互聯網]
免責聲明:本站文章系圖趣網整理發(fā)布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.irelandcustomcontracting.com/tutorial/di4137.html
用這個免費的 Sketch 插件,幫你完善還原安卓界面!
寫給新手的APP結構指南
圖趣網微信
建議反饋
×