網頁交互稿
A. 要畢業答辯了,做的是互動式個人網頁設計,答辯的時候要說些什麼最好能提供稿子
答辯主要是圍繞你做的畢業設計進行的,闡述一下完成過程中自己的想法和思路,內用容到了哪些技術,遇到了什麼問題,怎麼解決的,為什麼這么做。可以在這些內容里選兩三個深入一下然後引導老師在你准備的內容上進行問答。
B. 一個網站的交互文檔該怎麼進行撰寫
你好,今天我來詳細介紹交互設計師的輸出物–交互文檔的相關細節,其實,UX設計師在今天看來,仍然算是一個新興職位,所以我多講一些UX設計師的職位背景和相關工作內容,作為本篇文章的背景。
一、交互設計師的工作內容
5.在線預覽、分享更便捷
在摹客中在線撰寫或上傳的產品需求文檔,可通過鏈接快速分享給團隊成員,團隊成員獲得鏈接後可自由查看,當產品需求文檔有修改時,團隊成員仍可通過鏈接查看最新版本。
使用摹客等高效便捷的產品文檔撰寫工具,可以簡化產品文檔撰寫流程,提升產品經理的文檔撰寫能力,讓產品經理事半功倍。
C. 如何讓交互稿的體驗更好
1. 不同復雜度的需求應有不同的設計
我們會在工作中遇到不同復雜度的需求,因此,我們也應該有著不同的交互稿展現,比如一個非常簡單的優化,不會涉及太多修改和分析,就完全不需要過多冗餘的內容;而一個復雜龐大的需求,就需要復雜的分析和展現。因此,在我們進行交互稿的設計之前,就需要對需求的復雜度有清晰的認知,進而能夠明確該採用什麼方式來展現設計內容。
舉例說明:圖1-1至1-3中的三個需求的交互稿分別對應著,簡單,適中和復雜的需求。簡單的需求可預見的無需太多的更新迭代,有著比較明確的優化迭代,可能無需太多角色(可能不涉及視覺和產品),則無需太多的復雜信息,用最簡單的信息傳遞想要優化和修改的體驗問題即可;針對稍微復雜的優化,則需要一些必要的信息,比如可能需要有需求背景、流程圖、更新記錄等;而非常復雜或者全新的產品,可能會涉及到更多的內容,如圖1-3所示,將會在以下的注意點中提及。因此,優秀體驗的交互稿也是根據不同場景和情況、不同需求相應的變化的,而不是一成不變的。
2. 需求簡介和涉及的各角色的展示
需求肯定需要一個名稱來標明是什麼需求,最好能夠清晰明了,並且標注相應的版本,以方便未來需要用到時候能夠清晰的查看到。
針對稍微復雜點的需求,可能會牽扯到各種角色,一般的移動端產品大致包含:產品經理、交互設計師、視覺設計師、iOS開發,AOS開發,web開發,伺服器開發,iOS測試,AOS測試,web測試,伺服器測試等。而圖2中的需求簡介能夠無形中提升體驗:當某個角色因為某些問題,需要找到相應的人時,無需再去需求列表中尋求,在交互稿中也能一一查看。另外,需求來源的標明也能夠讓各個角色清楚的知道需求的重要程度和優先順序,比如圖2中的需求來源於「老闆」。
3. 清晰的更新記錄,可直達更新內容,並有清晰指示
設計其實是個過程,沒有完美的設計,只有更優的設計。在不斷的設計過程中,不可避免的會涉及增添、刪除、修改,因此,清晰的更新記錄不僅能夠幫助各個開發、測試等角色清楚的明確修改的內容並及時跟進查看;也可以讓自己更明確的總結和回顧在需求中自己的那些經歷,進而避免下次做設計的過程中遺漏和修改。圖3中即為筆者自己的交互稿中的更新記錄案例。
D. 到底要如何寫好 UI/ 交互稿的文案
Step 1 掌握產品需求和交互流程
你也許想像著交互設計師會坐下來,喝著咖啡款款而談。然而,現實是:
-「有個文案要review,交互稿發你。」
-「好。」
於是,文案審核的工作開始了。
有時交互設計師會花個幾分鍾時間,做一下簡單的解釋。在這幾分鍾里,迅速的理解交互稿的背景和大綱是文案審核的必備技能。
當交互設計師不多作解釋時,拿到交互稿後,我會先認真地從頭到尾、像一個真實的用戶一樣過一遍流程,目的只有一個:摸清這個流程是做什麼的、為什麼要做這個,作為之後正式審核的准備運動。
當然,如果在這個過程,我就發現看不懂或者其他疑問,我都會立刻詢問。曾經很多次在發現怎麼改都詞不達意後,仔細的詢問了原始需求才發現,其實那裡根本不需要文字或者用其他表達方式會更好。所以為了提高效率,比起匆忙著手開干,不如先靜下心來看懂交互流程或需求。
Step 2 查閱參考和案例
查閱現有案例
像點融理財這樣比較成熟的APP,優化流程以達到極致體驗的工作,會比從0到1的工作要多一些。所以在審核文案時,以前的交互稿,可以作為文案審核的重要參照。
就像我在以前的文章里講的那樣,UI文案最重要的一點,就是產品整體風格的統一性。對已有流程進行優化時,如果沒有出錯或沒有明顯需要優化的必要,應該與現有的文案和規范保持統一。
同時,現有文案又是以前在遵守規范的基礎上寫出來的,以此類推,即使時間推移,也能保證文案的質量不會下降。
查閱參考資料
在金融類APP裡面,經常會出現一些難懂的術語和規則說明,一旦不能理解就應立刻會去查詢,再轉換成用戶能理解的語句呈現給他們。原則就是:自己都不懂的文字,就不該出現在界面給用戶看到。
而另一方面,了解背景資料也是為了保證用戶體驗。
比如,在一些流程里,會要求輸入證件號碼。這時如果問:你知道號碼有幾位嗎?是英文還是數字,還是英文和數字混雜?
也許有人會說,這些跟我有什麼關系?╮(╯_╰)╭
那不如這么問:
用戶輸入時一般會怎麼犯錯?犯錯之後文案要怎麼反饋,他才能立即理解自己的錯誤?文案要怎麼提示,他才能知道如何修正自己的錯誤,從而順利通過這一步?
這個過程中出現的錯誤提示和反饋文案,也是UI文案中重要的一部分。了解背景資料是為了能寫好這些文案。但從另一個角度,如果從一開始就增加提示預警用戶:「號碼共X位,全為數字」,很可能用戶就不會發生輸入錯誤。
所以,通過調查了解證件號碼的特徵,再結合用戶操作的特性以後,最終會得出推薦的方案:除了錯誤提示和反饋以外,增加預警提示文案。
所以哪怕只是一個簡單的背景知識,也不妨多了解一下,因為了解這些,也是為了更好地理解用戶行為、他們可能碰到的真實情況,從而在用戶最需要的地方給他最恰當的文案提示,幫助他們完成操作、度過難關。
Step 3 開始修改和重寫文案
要修改的文案問題,分為這幾種:基本問題,不符合文案規范,不符合產品特徵,以及不符合用戶體驗。
基本問題就不提了,就是錯別字、語法問題和語句不通順等,這些問題原本就不該出現在用戶界面,是文案審核的底線。
其次,還必須符合文案規范。之前我在另一篇文章也提過,每個APP或網站都應該有自己的文案規范,這是根據產品特性和文案風格來定的,建立文案規范可以保證文案的統一性和質量,寫出讓用戶能理解的文案。
如果說排除上面兩類問題,是文案審核的基本的話,那發現不符合產品特徵和用戶體驗的文案問題,就相對比較高階了。
基本上,文案都是由交互設計師或者產品經理給出的,產品經理往往會從產品需求的角度去想,交互設計師則很容易陷入流程的泥沼,而無法對文案精雕細琢,有時也會忘記真正的文案閱讀者——用戶,導致文案不符合用戶體驗,所以,將文案到能真正讓用戶立即理解和順利操作、又能滿足產品需求,是最難的階段。
E. 網站交互設計:線框圖,原型和視覺稿的區別
首先,他們都是網站的界面和交互方面的模型,但完成度各不相同。
線框圖 —— 更多側重呈現網頁界面的主體結構,極易只要的頁面跳轉和邏輯關系。一目瞭然的了解網頁設計的大致情況。
原型圖 —— 原型添加更多的界面細節以及交互,已然是相當真實的網頁設計模型,能夠進行初略的產品演示和測試。
視覺圖 —— 更進一步豐富視覺、細節以及交互,與最終產品十分接近,方便演示和迭代。
當然,設計師設計過程中,使用的工具也會有所不同。例如,線框圖和原型圖,一般原型設計工具,例如摹客Mockplus, 幾分鍾就能快速完成。它新出的在線全新升級版本,提供更多模板、組件、交互以及狀態設計選擇,高還原度原型設計,輕松打造。
F. 如何寫一份易懂的交互文檔
我用的摹客來寫交互說明文檔,感覺是為產品團隊量身打造的文檔工具,支持在線撰版寫或上傳本地權文檔。
文檔可以和Mockplus、Axure的原型圖和Sketch、Adobe XD、PS的設計稿互相引用,相互論證。也支持自動生成歷史版本,可隨時追溯和查看。完成後可以直接生成鏈接分享給同事,同事可以在上面選中文字評論,審閱很方便,哪裡有問題也可以隨時查看修改。
文檔結合設計稿或原型圖,可以更加清晰地闡述交互邏輯、設計思路、功能范圍、頁面細節等等。團隊領導也可以根據產品需求文檔清晰了解為什麼需要開發這樣一款產品。項目的其他相關方也可以隨時參閱需求文檔,了解項目的基本信息。
自從2008年正式發布以來,HTML5已經成了如今互聯網的通用標准,作為構建以及呈現互聯網內容的一種語言方式,被認為是互聯網的核心技術之一。在這種語言結構下,設計者能夠自由的創作動畫和互動式網頁內容,提高用戶體驗。然而,如果用傳統的方式製作HTML5,需要對代碼較為精通,學習成本較高。那麼,廣大沒有學習過代碼,但是想像豐富的用戶,就無法涉及網頁設計和製作的領域了嗎?
當然不。
H. ui的交互文檔怎麼做
我用的摹客來寫交互說明文檔,感覺是為產品團隊量身打造的文檔工具,支持在線內撰寫或上傳容本地文檔。
文檔可以和Mockplus、Axure的原型圖和Sketch、Adobe XD、PS的設計稿互相引用,相互論證。也支持自動生成歷史版本,可隨時追溯和查看。完成後可以直接生成鏈接分享給同事,同事可以在上面選中文字評論,審閱很方便,哪裡有問題也可以隨時查看修改。
文檔結合設計稿或原型圖,可以更加清晰地闡述交互邏輯、設計思路、功能范圍、頁面細節等等。團隊領導也可以根據產品需求文檔清晰了解為什麼需要開發這樣一款產品。項目的其他相關方也可以隨時參閱需求文檔,了解項目的基本信息。
I. UI設計和交互的區別
交互設計是隱藏在背後的一系列用戶使用的習慣及人與機器一系列互動的版方式,界面權視覺設計(UI設計)就是在此基礎上呈現出來的,大家可以感受到的。先交互後視覺。
交互設計是一種目標導向設計,所有的工作內容都是在圍繞著用戶行為去設計的。交互設計師通過設計用戶的行為,讓用戶更方便更有效率的去完成產品業務目標,獲得愉快的用戶體驗。
如果是廣義的UI設計,應該包括原型設計、交互設計、視覺設計。狹義的UI往往只是人們看到的最後一個環節UI視覺設計,交互是當用戶發生動作事件,所產生的反映。比如點擊彈出下拉菜單,瀏覽過鏈接的顏色變紫,這都是非常細微的交互,但卻處處體現著用戶體驗。交互設計更多是對用戶行為響應的設計,UI視覺設計,更多是界面的外觀靜態設計。