導航:首頁 > 萬維百科 > 網頁版app交互圖設計

網頁版app交互圖設計

發布時間:2021-03-08 15:07:35

1、目前UI交互設計常用的軟體有哪些?UI處理軟體有哪些?

目前市面上確實蠻多的,建議學好一個,夠用就好——學多而不精其實就是浪費時間!
1. Adobe After Effects
AE這個軟體我想大家都知道,火得一塌糊塗,如果沒猜錯的話,它目前屬於設計師學動效的首選。
它的特點就是強大且牛逼,基本上要的功能都有。UI交互設計其實只是用到了這個軟體很小的一部分功能而已,要知道很多美國大片都是通過它來進行後期合成製作的,配合PS和AI等自家軟體來說,更是得心應手。dribbble上炒雞多的大神都是用這個軟體在show哦,畢竟這個軟體做demo那是很厲害的~
但是有些效果程序猿不見得能夠幫你實現出來, 因為實際的項目產品受太多的制約,木有那麼多程序猿會沒事給你做動效的!
2. Adobe Photoshop
可能很多人都認為ps只用來作圖和處理圖像的,並不知道ps可以做gif~然而當AE沒有火起來的時候,我們這些老ui設計師們都是用ps做gif,用flash做demo(過去我們只需要做PC桌面的動效)。如果沒記錯的話,ps從cs6之後開始進一步加強了動效的模塊,現在的版本能夠實現很多相對復雜的動效~
而筆者喜歡用ps來製作簡單的表情動畫,逐幀動畫用得居多。
3. Adobe Flash
Flash可以說是過去的王者,也是由於時代的發展原因,現在基本被淘汰了,這里不多做解釋,具體可以百度——據說特別耗費cpu和佔用內存,軟體裡面有都爆卡~不淘汰才怪,現在很多很low的網頁游戲還在用這種技術~
4. Pixate
這個軟體被大牛Google收購了,然而被收購一年後,Pixate Studio宣布於10月31號被停止更新了~凄凄慘慘戚戚。
Pixate是圖層類交互原型軟體,優點是可交互,共享性強,和Sketch結合相對高,同時對Google Material Design的支持比較好,有許多MD相關預設;缺點是沒有時間線,層級管理不是很明確,圖層一多就會非常的繁雜。
5. Origami
這個軟體可以用一句話來形容——超強大的高難度原型工具,要是沒點代碼知識做壓驚~~建議遠處觀望就好~
6. Hype 3
hype 3也算是火了一小段時間的,號稱無代碼動效神器,像AE一樣使用時間軸就做可互動的動畫。PC、手機、pad端都可以直接訪問(以web的形式),也可以導出視頻或者GIF。3.0版還有物理特性和彈性曲線,可以發揮更強大的動畫效果。對中國人來講,它原生支持中文這一點也非常棒!配合sketch效果也是杠杠的!
7. Flinto
界面跟Sketch很像,如果會用sketch那麼上手很快。它能夠快速實現各種滾動、轉場、點擊反饋效果,手機和電腦端的預覽都非常的流暢,貌似現在用的人不少~
8. Principle
這個軟體的和上面的flinto有點類似,界面和sketch類似,同時配合sketch也是非常方便。它主要是做2個頁面間過渡專場特效,元素切換,細節動效的工具。優點很明顯,效率高,質感好,缺點就是不能做整套原型。
9. CINEMA 4D
說到C4D或者大家第一反應是它是三維軟體啊~沒錯!但是它做起動效來也是帥破天際的~~下面是網路上用C4d做的一些demo。
10. keynote
keynote相當於windows的powerpoint,是個幻燈片軟體。但是!或許你並不知道,據說蘋果的UI交互設計師都是用keynote做交互演示的......只要能夠熟練掌握這個軟體,目前app里的絕大多數動效都是可以做出來的~但是相對復雜一點的動效實現起來就有點不夠.......但是已經很屌了好吧~~筆者經常為了省事直接都是用它做個簡單demo給程序猿看的,快捷方便啊~要知道時間就是金錢啊!
好啦~由於筆者也並不是全部了解目前市面上的動效軟體,按照自己的理解基本上一些相對主流的動效製作軟體就是上面這些,如有漏或者不對的地方還請指正~
總結:
1、AE屬首選。
2、PS製作簡單動效比較方便。
3、Flash被ADOBE爸爸拋棄了。
4、Pixate優點是可交互,共享性強,和Sketch結合相對高;缺點是沒有時間線,層級管理不是很明確,圖層一多就會非常的繁雜。
5、Origami,使用此軟體還是有點代碼知識為好。
6、Hype3配合sketch效果很好。最近也比較火
7、Flinto界面跟Sketch很像,能夠快速實現各種滾動、轉場、點擊反饋效果。
8、Principle,優點很明顯,效率高,質感好,缺點就是不能做整套原型。
9、C4D攻可三維,受可動效。
10、keynote相當於windows的PPT,相對復雜一點的動效實現起來就有點不夠。

2、web app與原生app有哪些交互設計區別

1、頁面跳轉更加費力,不穩定感更強
思考點:如何減少跳轉(扁平結構、頁面布局技巧),增加數據及展示的流暢流程及穩定性(技術)
2、更小的頁面空間(由於瀏覽器的導航本身佔用一部分屏幕空間),更大的信息記憶負擔
移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的,用戶在滾動屏幕的過程中需要臨時記憶的信息越多,他們的表現就會越差。
思考點:排版更清晰、信息更簡練 (可在原生APP基礎上去掉一些豐富、復雜的視覺表現)
3、導航不明顯,原有底部導航消失,有效的導航遇到挑戰
思考點:如何有效的提供導航?有哪些形式?
4、交互動態效果收到限制,影響一些頁面場景、邏輯的理解。
思考點:比如登錄注冊流程的彈出、完成及異常退出,做好文字提示。
針對以上困境,解決方法總結如下:
首先,從APP到WAP版,在產品上,最明顯且核心的:
1、精簡功能,只將核心的任務實現,非核心的枝節可考慮刪減。
2、做好新的Web App導航.
3、補充從Web App 對 下載原生APP 的引導。轉載,僅供參考。

3、一款優秀 APP 的交互設計,怎樣學習和借鑒

新手交互設計師需要關注幾個點:App本身的規范,熟讀並能夠看出來App本身哪裡有沒有不符合規范的地方。拆解掉這個優秀App所有的功能及體驗流程,思考每一步,及為什麼。最好是找這個App的設計師,郵件請教他這里是如何思考的。1.界面截圖or錄屏。把App整體的玩一遍,過程中截圖留檔。如果是對手勢支持較多或者動效較多的會錄屏留檔。2.頁面SitemapApp里不宜層級過深,把截圖整理後「同頁面不同狀態可以合並」還原一下Sitemap。看看別人如何組織自己的結構。3.流程重現還是利用前面的截圖,在畫圖工具里自己串一下。這里就可以發現這些優秀apps對於自己設計規范的定義。比如對於某操作,什麼時候使用浮層,什麼時候使用頁面。4.競品分析有對比才能看出設計差異和設計理念。找到同類型的優秀應用。看看每一個產品、設計上的不同處理。你就會發現其中真正的差異。5.保持使用如果你覺得他真的不錯,記得要時常用一下。因為我們不可能在一次使用中就能發現其中的每一個設計環節。如果是社交類的應用,最好找幾個有同樣興趣的同學平常一起來做測試。

4、WEBAPP與原生APP有哪些交互設計區別

從使用場景上,Web App用戶面臨比原生APP用戶更嚴峻的問題:
1、 頁面跳轉更加費力,不穩定感更強
2、 更小的頁面空間(由於瀏覽器的導航本身佔用一部分屏幕空間),更大的信息記憶負擔移動設備的屏幕要小得多。這種如同透過門縫進行的閱讀增加了認知的負擔。人腦的短期記憶是不穩定的,用戶在滾動屏幕的過程中需要臨時記憶的信息越多,他們的表現就會越差。
3、 導航不明顯,原有底部導航消失,有效的導航遇到挑戰
4、 交互動態效果收到限制,影響一些頁面場景、邏輯的理解。

5、什麼軟體可以設計動態app頁面交互

你可以試試應用之星網站,可以設置動畫效果來控制,交互可以用交互控制項來設置

6、什麼是app交互設計

app交互設計分為以下5種:
1. 樹形結構,做產品交互的邏輯關系就要像自然生長的大樹,樹干、樹枝和樹葉越往內部交互就要越少,不能在樹葉上長了顆大樹。
通常情況下很容易理解,交互設計與功能復雜度相聯系,就像大樹一樣,界面展示一開始的時候是樹根 樹干 樹枝和一片小樹葉,功能點一點點變小,減弱。但是有時候我們在用app的時候會在一個很不明顯的地方有一個大功能,就像發現新大陸一樣,我不說這個對還是錯,如果這個新大陸是一個很重要的功能點,那麼做交互就要有新手引導,指引用戶用這個功能,不然只有20%的用戶會發現此功能,埋藏越深責用戶點擊率會越低。如果這個功能不是很重要那麼可不可以換一種形式展現,減少功能點從一棵樹變成一片樹葉。
2. 大眾交互,為了追求不一樣而硬要改變的同時要做好新手引導。
交互的復雜多變會讓用戶摸不著頭腦,一半用戶學會這個功能需要交「學費」,要做到市面上最普遍的形式,不要因為不一樣而變的不一樣,如果非得要變就要把它變好,要好新手指引,不然改變了用戶習慣,給那些「小白」用戶造成困惑,甚至是流失很多潛在付費用戶。
3. 錯覺交互,利用人性的弱點擴大產品收入。
錯覺交互是利用人們最正常的用戶習慣來做一些用戶不想做的事情,達到研發商的目的,通常利用這種情況最多的是付費,無意間騙取用戶錢財,很多用戶不會在意1元兩元的費用打電話投訴或索要,就造成了很多研發商一款上線的產品會有大幾百萬的流水。
4. 深度交互
深度交互就是人機器界面又增加了機器的交互,比如:很多唱歌的app,當你錄制歌曲的時候利用自帶的耳機錄制音樂效果會很差,不會讓歌手發揮更好就自己研究了一款麥克風,用手機這款app要配合一款外接一款機器才能達到最理想的效果
5. 本質交互
「顧客是上帝」一定要分析用戶。每個項目的實用性和交互性不是在給某一個老闆或者哪個製作人用,不能按照他們的想法做出他們喜歡的東西,是給用戶用。老闆們用多年來的經驗和閱歷為依據在做事情,請不要忘記你的思想掌控不了用戶,用戶的思想你要研究甚至成為你的用戶,不然總認為自己是金字塔上最高的人,指揮跟你混的人民戰斗,不深入了解用戶你指揮的永遠是外走內不走,行屍走肉一般

7、如何使用ppt實現APP交互設計

其實還是能做到的,我這么干過,步驟
1.安裝2013版office
2.熟悉操作,尤其是基本動畫設計和合並形狀(推薦秋葉PPT三分鍾教程,有免費電子版哦,認真做完每一期三分鍾就差不多了)
以上兩點就夠了

8、做交互設計(App方面)需要具備那些知識

需要一個製作交互原型圖的軟體;Axure之類的,你要手繪額,也是可以的
然後就是APP交互版設權計的規范了,這個就需要自己去一些做交互的網站自己發掘,我這里講不完的。
http://www.woshipm.com/
http://jumpui.com/
http://www.ui.cn/

9、APP交互原型圖 怎麼畫?

Low-fi,即低保真原型圖,整個APP設計階段,設計師真正開始上手的環節。待PM製作好PRD文檔和邏輯流程圖之後,交互設計師開始依據已有的結論,畫出Low-fi。
Low-fi的作用
1. 方便團隊進行方案的討論和統一。
就像使用場景Scenario和用戶畫像Personas,團隊每個成員腦海中所理解的都會有所不同,但通過PRD,咱們可以進行至少是大體上的統一。而在這基礎上,APP的具體畫面和流程,每個人都有自己想像的視覺效果。Low-fi就在此時起了相同的作用。
當然統一的進一步促進效果是,進行後面核心功能的深入探討,將概念落實到實施方案,並驗證邏輯上是否能跑通,以及主頁面元素的確定。
2. 方便開發人員進行整體架構的布置,開始著手一些基礎元素的部署。
3. 做出demo進行內部嘗試、小范圍的用戶調查,一般會有一些更改,不會影響項目主方向,大多是功能上的調整
Low-fi 的處理工具與文件要求
作為交互設計師,在Low-fi階段多使用的是sketch,PS更側重於用來做圖片的處理。出發點還是更多的從效率上進行考慮,sketch運行速度非常快,文檔小,測量距離方便,可復用的圖層組(symbol),做好圖之後導出多倍圖也十分方便。所以在此階段做草圖,sketch是不二之選。
然而,對Low-fi的文件處理也有一些要求,主要分為視覺效果和文件名整理。
視覺效果上傾向於使用黑白灰無色彩感的設計方案,目的是為了降低視覺上的干擾,讓設計師和團隊其他成員,將精力重點放到APP本身的功能完善和邏輯完整上面。
而文件名的整理主要表現在圖層命名需要規范。統一的控制項用symbol進行管理,symbol的命名建議使用駝峰式,即每個單詞間沒有空格,每個單詞首字母大寫(這里說的是大駝峰式,即第一個單詞的首字母也大寫了)。

與網頁版app交互圖設計相關的知識