當前位置:首頁 » 網頁前端 » 交互設計中的web
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

交互設計中的web

發布時間: 2023-01-03 15:10:29

Ⅰ 交互設計與用戶體驗設計

app和web:交互設計是由頁面、icon、文字著三種基本要素構成的系統流程

交互設計概念

路徑 效率 行為

1、以最簡短的路徑達到自己想要的目標

2、交互設計決定著用戶對產品的使用效率

3、幫助用戶用最簡單的方式引導,讓他們找到關注的內容和想要使用的功能。

用戶體驗設計概念

感受

用戶體驗時用戶在使用產品過程中建立起來的一種純主觀感受。它是整個過程中身心全方位的接觸和體驗

用戶體驗貫穿產品:

有用性(基本)

易用性

友好性(用戶對你的產品認可,丟不掉)

 用戶體驗核心本質

用戶體驗核心和本質就是研究人在特定場景下的思維模式和邏輯,然後順應和利用它。

如:以最短路徑提升用戶購買慾望

及時反饋

產品與用戶交流的指標

交互設計是否有效

信息是否傳達准確

反饋類型-視覺

最常見的反饋方式,所以也最容易會被用戶忽視

1、toast提示:一般2到3秒短暫出現,可以在屏幕任意位置,然後自動消失,無需任何操作,內容簡訊息不重要。

2、彈窗提示:能後引起用戶的主要,需要簡單的操作,通常用在詢問用戶是非需要進行某項操作。

3、按鈕被按下的狀態:當用戶在使用中按下一個按鈕時,一般都會出現按下狀態,讓用戶知道他的操作得到了回應。

4、動效反饋:幫助用戶直觀的了解操作,同時會給用戶留有深刻印象,提升產品的吸引力

注意:簡潔易懂,操作反饋信息簡單適當使用插畫吸引用戶注意幫助用戶提示判斷類型。

聽覺

強度高於視覺,使用率卻不是很高,不能作為主要反饋,並要給用戶關閉的權利,因為過度使用用戶會反感。

觸覺

比較少見但是很強烈的反饋方式,基本作為輔助

操作流程簡捷

1、使用自然思維非程序思維

2、圍繞用戶的目的設計

3、減少查找步驟

4、將常用功能提前

5、遵循已經成型的用戶習慣

審核交互:

1操作前可預知

2操作中有反饋

3操作後可撤銷

用戶習慣與用戶體驗:

用戶習慣大於用戶體驗

UE:用戶體驗的簡稱(國外叫UX)

產品設計的靈魂職位,通過分析用戶心理模型,產品功能需求。設計任務流程,運用交互知識搭建產品核心構架,並設計出原型以最終實現產品的易用,好用。

PM項目經理(Project Manager)思維導圖和原型圖

前端開發:FE(Front-End Development)只能看不能用

研發:RD(Research and Development)偏向於後端的技術實現:功能技術實現,能看能用

測試:QA(QUALITY ASSURANCE)

產品經理至少2-3個,

設計師游3個人,前端就要有6個,後端9個,測試1-2個

UI設計思路

立項會議:頭腦風暴

用戶頭像(用戶痛點,用戶故事)

競品分析

產出產品文檔與流程圖

參與者:所有人

溝通會議 確認產品文檔

設計師核對原型圖

程序員考慮開發成本

參與者:產品經理 設計師 程序員

原型圖-低保真(沒圖片圖標)

為什麼需要低保真:低保真原型時在設計初期幫助我們驗證想法的粗略表述

低保真原型構建起來更加容易且成本更低

溝通會議:確認低保真

產品經理核對低保真

工程師核對低保真是否可實現

工程師搭建框架

溝通會議:確認高保真

產品經理確認界面符合產品要求

工程師趣兒是否能實現界面交互

溝通會議:如何對接

如何切圖,切圖的命名方式

如何交互,交互方式

產品開發完畢

設計師核對界面

測試工程師找bug

工程師改bug

立項會議:頭腦風暴

下版本規劃

測試工程師繼續找bug

工程師繼續改bug

時間節點:app78十張三個月左右 web一個星期

交互設計6大原則

費茨定律:游標到達一個目標的時間,與當前游標所在的位置和目標位置的距離和目標大小有關

席克定律:是指一個人面臨的選擇越多,所需要作出決定的時間就越長

泰思勒定律:這個定律時說產品固有的復雜性存在一個臨界點,超過了這個點過程就不能再簡化了

4防錯原則

5剃刀法則:我們做產品時功能上不可以太繁瑣,應該保證簡潔和工具化(國外用的好,國內差)

6接近法則:將相似的、有關聯的信息盡量擺在一起,不要讓用戶迷茫,要潛意識知道在哪裡能找到自己想要的信息

設計師誤區

誤區A:配圖是後台運營的工作

頁面由icon、文字、配圖的排版而組成

誤區B:狀態欄顏色只能一種

誤區C:界面動效全權交給AE

1code4app

2市面已完成動效

3AE輔助實現(有前提)

4keynote輔助實現

誤區D:讓所有用戶滿意(50%以上)

誤區E:完全按產品經理意圖行事

1反駁產品經理不靠譜的需求

2主動分析調研,提升用戶體驗數據

3深入思考使用場景

4跟進開發,找到性價比高的方案

5尋找創新有趣的交互方式

 didot襯線英文:時尚飾品

Ⅱ 交互設計要注意什麼 跨終端web

一、力求一致性
例如網站首頁需要和每一個下級頁面保持一致的風格,導航都要放在屏幕的左上角,具有高度一致性的界面能給人清晰整潔的感覺。
二、允許頻繁使用快捷鍵
快捷鍵表示產品使用的靈活性和有效性,想想每次使用搜索引擎的時候是滑鼠點擊的搜索還是按的回車?
三、提供明確的反饋
出現錯誤時要明確說出錯誤的含義,而且需要考慮用戶能否理解,比如大家基本上都遇到過HTTP404錯誤,但絕大多數人能看懂么?所以反饋要明確且通俗易懂。
四、設計對話,告訴用戶任務已完成
要在用戶完成某項任務或操作後進行提示。如果用戶在做了很多操作後卻得不到反饋,用戶就無法知道自己是否達成目標。
五、提供錯誤預防和簡單的糾錯功能
例如把某些當前不能點擊的按鈕設置為灰色,在系統執行時讓用戶在確認一下。
六、應該方便用戶取消某個操作
大多數的應用軟體都有撤銷和恢復的功能,如果用戶總是懼怕一失足成千古恨,那樣的用戶體驗可想而知。
七、用戶應掌握控制權
一般而言用戶希望自己去控制系統交互,在執行任務中,用戶應該可以隨時中止或退出,而不是無奈的看著系統繼續。
八、減輕用戶記憶負擔
應該盡可能幫助用戶避免要求他們記住各種信息,例如各個菜單項之間的邏輯關聯,更好的分類就會幫助用戶找出哪個功能按鈕在什麼地方。

Ⅲ web交互設計和網頁設計有什麼區別

交互設計比網頁設計需要更多的設計技能,在良好的網頁設計基礎上,需要多用到前端方面的技術

Ⅳ 什麼是web前端開發

前端前景是很不錯的,像前端這樣的專業還是一線城市比較好,師資力量跟得上、就業的薪資也是可觀的,學習前端可以按照路線圖的順序,

0基礎學習前端是沒有問題的,關鍵是找到靠譜的前端培訓機構,你可以深度了解機構的口碑情況,問問周圍知道這家機構的人,除了口碑再了解機構的以下幾方面:

1. 師資力量雄厚

要想有1+1>2的實際效果,很關鍵的一點是師資隊伍,你接下來無論是找個工作還是工作中出任哪些的人物角色,都越來越愛你本身的技術專業前端技術性,也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師,一個好的前端培訓機構必須具備雄厚的師資力量。

2. 就業保障完善

實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台,即能夠為你提供良好的就業保障,讓學員能夠學到實在實在的知識,並向前端學員提供一對一的就業指導,確保學員找到自己的心理工作。

3. 學費性價比高

一個好的前端培訓機構肯定能給你帶來1+1>2的效果,如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作,你將獲得比以往更多的投資。

希望你早日學有所成。