導航:首頁 > 萬維百科 > 網頁ui原型設計

網頁ui原型設計

發布時間:2020-12-23 08:54:49

1、ui設計餓了么的原型圖

UI設計源於對其產品名稱和產品理念的創意,UI設計的三大具體分類——圖形設計、交互設計和用戶測試/研究的工作職能——分別對應的是美術設計的專業知識,軟體工程師背景和相應的編程能力,以及社會學心理學等人文學科儲備。當然,實際工作中,這幾種職能也不是截然分開的。而今,這一涵蓋諸多領域的職位,也越來越要求從業人員同時具備跨學科、綜合性的理論素養和實際操作能力。
在工作能力和實踐經驗上,一是要求從業人員精通Photoshop、Illustrator、Flash等圖形軟體,Html、Dreamweaver等網頁製作工具,能夠獨立完成靜態網頁設計工作;熟練操作常用辦公軟體,且具備其他軟體應用能力;熟悉Html,CSS,Javascript,Ajax。二是要求對通用類軟體或互聯網應用產品的人機交互有自己的理解和認識。三是具備良好的審美能力、深厚的美術功底,有較強的平面設計和網頁設計能力。四是具有敏銳的用戶體驗觀察力,富有創新精神。

2、做UI設計用什麼軟體最好

推薦8款原型設計工具:

1. Axure PR

難度:★★★★

公司旗艦產品,是一款專業的原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟體或Web網站的線框圖、流程圖、原型和規格說明文檔。
這是一款非常專業的工具, 但是學習成本也非常高。如果你是一位專業的交互設計師,並且需要設計復雜是交互,你可以使用這款工具。

2. Mockplus

Mockplus(摩客) 是一款簡潔高效的原型圖設計工具,有別於Axure的繁復,Mockplus致力於快速創建原型。無論你是產品小白,
還是大牛,摩客都能滿足你的需求。摩客的設計理念就是關注設計,而非工具。如果你時間有限,那你不能錯過摩客,因為幾乎不需要學習,
你就可以上手這款工具。摩客提供了豐富的組件庫和圖標庫,創建原型,你只需拖一拖。摩客發布2.1新版之後,交互也成為其一大亮點,她將交互設計可視化,只需要拖一拖滑鼠,即可完成交互的設計,所見所得,沒有復雜的參數,更無需編程。封裝好的一些系列交互組件,比如彈出面板、抽屜、內容面板等,讓設計交互幾乎可以全程「無腦」操作。演示也很簡單,直接二位碼掃描即可,同時支持發布到雲和導出演示包。

3. Balsamiq Mockups

Balsamiq Mockups是一款快速創建原型的工具。這款原型工具具有獨特的手繪風格。軟體的內置組件,
拖拽功能的支持為設計帶來了便利。該工具有桌面版本, 同時也可以作為Google Drive, Confluence 和 JIRA的插件使用。

4. Justinmind

JustinMind
是由西班牙JustinMind公司出品的原型製作工具,主要致力於高保真原型。它提供的功能有繪圖工具,拖放位置,大小,格式和導出/導入的小部件。你還可以自定義小組件,創建自定義組件庫,並進行分類,
提供豐富的動畫支持。如果你要創建復雜的高保真原型, 可以嘗試這款工具。缺點就是需要一定的學習成本,程序啟動也比較慢。

5. InVision

InVision 是一款設計原型交互的工具。使用InVision可以很好的實現團隊之間的協作,
也便於收集反饋意見。它可以讓你將靜態的網頁,移動app設計圖快速的變成可以點擊, 具有交互效果的動態原型。讓你的設計「活」起來。

6. UX Pin

UXPin
是一款在線原型設計工具。你可以通過拖拽的方式快速創建原型,無需敲一行代碼。通過UXpin,你可以創建高保真原型,同時也支持從Sketch和Photoshop導入你的設計。

7. OmniGraffle

OmniGraffle 是由來自美國的The Omni Group製作的一款原型設計工具,這款工具只針對蘋果用戶,有OS X版和iOS
版。它曾獲得2002年的蘋果設計獎。可以使用它快速繪制線框圖、圖表、流程圖等。用Origami創建iPhone和iPad原型是比較好的選擇。

8. Flinto

Flinto
可以讓你快速的為web、移動app設計交互。通過拖拽,可以快速的為你的設計圖設置跳轉和動畫。Flinto提供了常用的轉場效果。如果你需要設計iOS
app的交互演示效果,Flinto是不錯的選擇。

總結:

市場上的原型設計工具各色各樣,很難定義誰是最好的。這還主要取決於你的個人喜好和設計需求。如果你正在尋找一款簡單易用,又實惠的原型設計工具,個人認為Mockplus是很理想的選擇,不像Axure、Justinmind那樣繁復,也比Balsamiq功能強大。這是國內第一款原型設計工具,服務和支持也做得很好。

3、ui設計需要什麼軟體?

ui設計需要用到的軟體很多,現列舉一些ui設計常用的軟體如下:

Photoshop、Adobe illustrator、Adobe After Effects、Axure RP、sketch。

(1)Photoshop主要處理以像素所構成的數字圖像。使用其眾多的編修與繪圖工具,可以有效地進行圖片編輯工作。ps有很多功能,在圖像、圖形、文字、視頻、出版等各方面都有涉及。

(2)Adobe illustrator,常被稱為「AI」,是一種應用於出版、多媒體和在線圖像的工業標准矢量插畫的軟體。作為一款非常好的矢量圖形處理工具,該軟體主要應用於印刷出版、海報書籍排版、專業插畫、多媒體圖像處理和互聯網頁面的製作等,也可以為線稿提供較高的精度和控制,適合生產任何小型設計到大型的復雜項目。

(3)Adobe After Effects軟體可以幫助您高效且精確地創建無數種引人注目的動態圖形和震撼人心的視覺效果。利用與其他Adobe軟體無與倫比的緊密集成和高度靈活的2D和3D合成,以及數百種預設的效果和動畫,為您的電影、視頻、DVD和Macromedia Flash作品增添令人耳目一新的效果。

(4)Axure RP是美國Axure Software Solution公司旗艦產品,是一個專業的快速原型設計工具,讓負責定義需求和規格、設計功能和界面的專家能夠快速創建應用軟體或Web網站的線框圖、流程圖、原型和規格說明文檔。作為專業的原型設計工具,它能快速、高效的創建原型,同時支持多人協作設計和版本控制管理。

(5)Sketch,即Sketch-A-Etch,是一款素描繪畫類的軟體,玩家需要旋轉左右兩個旋鈕來控制面板上的畫筆描繪出你想要的圖像,並且可以給它們上色。

4、比較好的游戲功能、UI原型設計工具有哪些?

沒有最好的產品,只有最適合的工具,個人使用習慣和喜好不同對產品原型工具評價版也會有所偏差。現權在主流的原型界面設計軟體基本就那幾款吧,比如Framer、Shireframe、v-proto,前幾款對技術和入門還是有要求的,後者是國產,更符合國人使用習慣,而且零基礎的人也能很好的使用。

5、UI設計需要學慣用到哪些軟體

photoshop、AI、AE、Axure、Fireworks、CorelDRAW、Flash
目前在中國大部分從事UI設計的工作者,也有人稱之為美工
可是事實上這並不是單方面的美術工人
而是軟體產品的產品外觀的設計者
現在學習UI設計的人很不其中以大學生或是白領為主,如果找個靠譜點的UI培訓機構(全程面授),學習起來很好入門。

6、ui設計要會Axure RP么 ?? 網頁設計涉及原形設計么

不需要,但是會的話加分
UI即User Interface(用戶界面)的簡稱。泛指用戶的操作界面,包含移動APP,網頁,智能穿戴設備等。UI設計主要指界面的樣式,美觀程度。而使用上,對軟體的人機交互、操作邏輯、界面美觀的整體設計則是同樣重要的另一個門道。好的UI不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由,充分體現軟體的定位和特點。

7、高保真原型和UI設計圖有什麼區別

有點像建築師的效果圖跟實際照片的區別。

8、Ui原型設計工具有哪些呢?

1、墨刀:超快的移動應用原型工具
2、omnigraffle:os x專用
3、App Cooker:ipad上的原型設計工具
4、乎之原型:原型快速設計
5、Easel:讓不會代碼和用戶界面設計的創業者快速製作產品原型頁面
6、Prott:非常出色的原型設計工具
7、Protoshop:10分鍾由平面設計稿打造出可在移動設備上運行的Native App原型
8、摩客:簡潔高效的原型圖設計工具
想要學習可以到AAA教育了解一下

9、企業軟體開發中低保真原型和UI設計規格有什麼不同

實際很多交互設計工程師在給研發人員時,只有低保真原型,所以很多人還不知道產品的UI設計規格有什麼作用。我們下來仔細分析一下:
低保真原型是模擬產品特定功能和界面的設計作品,並非實際的最終產品。低保真原型往往主要是線框圖或草圖等實現的,在企業軟體中往往體現的是一個或多個場景任務下的界面設計內容。當然很多也有採用ppt或其他工具實現的。有的工具看起來視覺效果很好,似乎和真實界面一樣,但不能交互。開發人員由於覺得也足夠了,一般也會認為低保真原型就夠了,不用再交付更多的文件說明了。
UI設計規格實際上是為了更好的交付給軟體開發實現人員而給出的產品設計規范類文檔,主要明確了產品在實現人機交互時應當必須滿足的設計點,文檔內容可以分成這幾部分:
概要。主要說明本規格主要包含哪些內容,以及低保真原型和本UI規格的關系。如後面的關系說明就可以明確並清晰地寫「xx低保真原型所體現的界面設計和明顯的交互關系不在此規格內重復說明」。
系統交互框架:主要說明軟體界面的框架組成和界面內典型的各個模塊說明、關系的說明。同時,建議說明設計此框架所適用的用戶和業務場景任務及頁面之間的關系,使開發人員對設計的背景、人機交互的框架有一個基本的了解,而且可以找到自己業務相關的關鍵場景任務信息。
設計要素:主要說明對屏幕解析度、文本的字體及大小、排版的樣式和顏色、標點符號和編碼等視覺所能看到的設計要素、後面實現需要滿足的視覺對象規格的一個清晰的說明。
交互設計:一般至少需要說明鍵盤交互和滑鼠交互的設計要求,因為計算機的輸入基本是這兩類。但也有新的交互技術應用如語音、動作輸入等,這些如果在業務使用中體驗非常關鍵,也需要給予明確說明。同時,在界面操作中,瀏覽類的視圖控制項如菜單、Tab、樹類視圖、表格和隱藏區等,編輯類控制項如按鈕、文本框、下拉列表、列表框、單選框、復選框和彈出窗口等,這類控制項的操作有時在低保真原型很難表達清晰,可以在UI規格中給予清晰的說明。例如按鈕,至少可以有三種狀態:無效、有效和被點擊狀態,如果體驗要求高,狀態可能更多,如滑鼠懸浮在按鈕上也特殊設計成不同的顏色或質感狀態,使用戶明確可以點擊按鈕。在Web界面上,鏈接就是一類很特殊的按鈕,其狀態可以多達5種以上。在線幫助的交互要求也可以寫,不過這部分往往由於和信息架構、資料開發相關,往往會單獨放在資料的設計要求中。
最後還建議附上在產品設計中所依賴的設計原則,使開發人員了解到相關的設計哲學思想,同時培養開發人員盡量掌握更高的體驗設計技能,在基本設計原則上要求開發人員也應當能夠遵守。
那好,如果沒有設計規格,只有原型是否可以呢?實際現在是很多產品都不重視UI設計規格,包括交互設計人員也覺得寫這個文檔要化很多時間,平常很多問題都已經溝通了,沒有動力寫。結果呢,好一點的產品,開發人員感覺好一點,代碼復用多一些,有時能夠將風格不一致的現象減少很多。但由於缺乏規范規格的約束,開發人員很多由於開發時間和效率的問題不會有這么多的考慮和交流,最後實現的產品界面存在很多小問題。只不過企業用戶,忍受能力比較強,畢竟是為了工作,不會在意那些小問題,任務一定要完成啊。
但實際從工作效率來看,成功完成項目,有過高質量交付的工程師,可以理解這個文檔可以起到很多提升效率的作用。比如同樣的設計問題,如果一個人問了,或UE問了跟蹤了就解決了,用文檔的意義就沒有了。但在企業中,產品往往開發人員很多,有上百甚至上千個頁面需要開發完成,這時很多問題重復率很高,這些問題在文檔中寫清楚使開發人員准確理解比每次重復答復要有效、高效得多。而且文檔寫出來,往往其語義和語法要比口語嚴格得多,可以防止口頭傳遞的信息質量衰減。俗話說"好腦瓜不如爛筆頭",很多時候人們口頭交流會很高效,但會忽略很多因素,例如默認的設計風格和圖標,但每個開發人員往往由於自身經驗理解又不一樣。所以即使對於很多聰明的人來說,形成一些好的想法、通過口述把這樣的好想法表達出來都不難。但是,對於一個比較復雜的軟體,幾十人合作開發的人,即使通過口頭傳遞也很難去檢查想法中存在的各種各樣的漏洞和需要解決的問題。
但是如果把規格寫下來就不同了。大家可以一遍又一遍地審視文檔,一遍又一遍地補充和完善表達中存在的不完善和不嚴謹的地方。文檔可以在任何時候拿來慢慢思考、理解和優化,無論對自己還是開發人員,大型團隊的溝通絕對需要這些關鍵的文檔,否則會出很多問題。
另外文檔寫出來,可以以後有新的UE或其他工程師在新產品開發版本或老版本上優化時,進行更好的優化,比重新理解系統,重新整理規格的難度要小得多。而且企業如果不重視框架文檔的說明,很可能到了後面來一個新人就會上一個新框架,因為人們總是喜歡做自己擅長的、能夠理解的事情。而且企業往往存在人員流動和流失的問題,誇張的企業可能過幾年雖說研發部門還存在,但可能的感覺是物是人非吧。對於這樣的生存環境,企業產品研發中沒有相應地設計文檔傳遞,企業的設計風格會非常混亂。企業形象也會受損。
同時,在復雜產品中,往往企業本身產品開發出基線版本後,還需要根據現場環境進行定製開發。這時,如果沒有UI規格文檔指導,很可能設計的其他頁面和原有頁面差異很大,而且用戶會覺得很不習慣。為了保證好的定製產品開發體驗,企業還可以將UI規格相應改動為體驗設計指導書,指導本地或合作外包或其他研發企業盡可能使用自己的提供的組件和一致的風格,保證企業品牌形象的傳遞和延伸。在這點上,我非常佩服蘋果公司的體驗指南和實踐,具體和原則都寫得很到位,而且在app審核中如果沒有按照規范要求使用相應的圖標就不會給予通過。
當然,在實際企業軟體開發中,很多軟體不一定是需要考慮這么多,更多要考慮效率,先開發出來滿足客戶需求,爭取機會讓內外部客戶認可先活下來,這樣沒有必要一定要按照上面的要求輸出很僵化的文檔,可以在相應原型或視覺效果圖中標注清晰也是一個好方法。只要將必要的UI設計要素給需要的研發人員說明清楚了,後面若需要組織起來還是很容易的一件事。
軟體積累很深的企業還可以通過高保真原型和組件化降低產品UI設計規格的復雜度,因為直接將高保真原型和組件列在文檔的相應說明中,開發人員會直接下載或拷貝相關代碼,這樣編程中很多需要組件內部實現的交互就不用重新編程了,開發人員也可以通過繼承樣例代碼快速實現高質量的界面交互。不過,這個需要產品或企業先做好平台積累或高保真原型和組件,開發或體驗管理者需要有遠見和良好的合作共享精神。
所以這個道理一定要和產品說清楚,使產品業務開發人員真正理解和配合UI設計規格的寫作,做好產品的設計實現。否則,有些開發人員只看到了低保真原型,但還是不清楚交互設計人員或可用性工程師的作用,就會說交互設計不就是個畫破圖的嗎?然後我們不解釋不好,解釋呢,有點被動,例如:交互設計師不僅僅是個畫破圖的(交互設計的輸出不僅僅是線框圖和單頁面設計圖),他的交付還可以包括視覺要素設計、特殊交互說明、高保真原型、用戶情景(user scenario)、准則(style guide)等等。這樣解釋感覺真是有點損己利人。
如果你或產品有這個文檔,那些只看到原型沒有去看UI設計規格的人再說交互設計不就是個畫破圖的嗎?你就可以說,不會啊,我們還會輸出UI設計規格,為什麼呢?按照我上面寫的解釋一下就可以了。如果他說,我怎麼沒有看到這個規格,你就說:「是你太爛好不好,放在那裡都看不到!」。

10、怎樣用WireframeSketcher創建安卓UI原型設計

打開WireframeSketcher工具,在左側Project Explorer中單擊滑鼠右鍵,彈出菜單。

選擇new-》Wireframe Project,彈出創建窗口。

在Mobile下找到Android,選內中。

輸入項目名容稱,然後點擊Finish即可。如果選擇next,則選擇引用項目。如果不引用,直接點finish即可。

此時項目創建成果,可以看到默認生成的頁面,有一個手機屏幕,在此基礎上可進行原型設計即可。

希望可以有幫到你 望採納 謝謝

與網頁ui原型設計相關的知識