發表文章

目前顯示的是 七月, 2016的文章

原型設計經驗分享輕鬆聚筆記 02

圖片
02 日本設計團隊的設計流程及Prott的應用技巧與案例分享 -- Stephanie / 日本Goodpatch公司 。
內容主要為




主要心得感想:

得過很多獎的公司注重使用者的公司重視設計開發流程的公司

在設計流程的前、中、後期的各個環節都很細心,環環相扣

專案開始前的客戶問題、行為模式及需求範疇分析。專案開始後的Design Kickoff、團隊建立。透過工作坊的方式建立專案地圖。各種不同的Review Meetting。 服務上線前,透過Prototypes不斷的修正迭代 讓專案的方向與目標更加明確。將沒有被語言化的想法,透過Prototype以具體化的方式分享設計脈絡。Prototype是團隊的共通語言。
Prott軟體的介紹

就是得過很多獎。不只是prototype的工具,更是架構團隊Prototyping文化的工具。可快速產生UI Flow,這個很神。
一休Restautant的設計案例介紹
產品願景真的很重要,但也要能落地。User Goal要明確。網頁版的UI帶到APP,網網頁會把問題一起帶去。手機版的網頁UI不等於APP的UI,要從使用者的體驗來著手。盤點現有產品,並將頁面整理。試用各整競爭對手的產品。整理手機版網頁的使用者體驗過程。重新定義使用者的需求,思索新的使用體驗及流程。透過Persona來形塑使用者的意見與形象,作為使用者經驗設計的基礎來討論。將新的使用者體驗做成Story Board。簡化使用者的操作流程。發想新功能及比較方案。最後,才著手設計新UI。(這個真的很重要,數字公司聽到沒有)設計師之外的植種,都使用Prott的線稿功能來製作Wireframe>透過網址分享搭配使用情境的簡報模式。成員間使用留言功能來做溝通與Review。公司全員一起Review專案,收集不同觀點的意見。(沒有人是獨裁者)最後才製作整體的視覺設計。(這個真的很重要,數字公司聽到沒有)先從iOS確認整體效果,,再重新配合Android製作Material Design 總結 使用者的體驗是抽象的,其中包含著難以用口頭說明的感覺及直覺。把沒有被語言化的腦中想法,以具體化的方式分享設計的脈絡。Prototype是團隊的共通語言。持續在Prototype上作為調整,完成精準的設計原型在進入實裝。(這個真的很重要,數字公司聽到沒有)




原型設計經驗分享輕鬆聚筆記 01

圖片
首發是由 Wesley Hwang 主講:
主題是想像力不是使用者的超能力-Prototyping 淺入淺出


記錄自己覺得重點的東西,及部分自己的想法。
僅透過快速的Sketch或剪貼的方式是不適合向客戶展示的。作為與團隊初期的溝通是快速且成本低的。iOS 6以前,因為是擬真化的設計,當畫面更改時,所有頁面都要重刻。直到扁平化設計來臨的時候,也是Prototype工具快速興起的時候。prototype 主要強調的是真實的改善體驗。確認Prototype是不是一個好的概念模型。透過Prototype來refine 設計。透過Prototype 的工具來提高溝通效率:對內及對外的溝通對象不同,採取的方式也會不同。概念是從使用者的想法或觀察使用者而得來。prototype是一個概念模型:將產品的實現模型與使用者的心智模型,透過Prototyping不斷的改善迭代過程中,將二者的差距縮減至最小。設計師小心(避免)背後靈。產品設計開發階段,每個公司(或人)都可能不一樣,產出也可能會有差異。慎選工具,沒有最好,只有最適合的。透過wireframe確認流程與功能,有問題立即與PM或UX討論。善用UI Kit,發展產品自己的UI Kit,加速開發與溝通過程。UI元件 > UI Patterm > UI guideline,想到Design System。任務導向的功能(有終點的),以流程繪製Mockup
電商或社群導向的功能(沒有終點的),以頁面繪製Mockup流程與洞效是兩件事情。
流程,是為了展現完成一件任務所需經過的過程步驟。
動效,是為了讓使用者能容易認知或辨識過程或動作完成的轉換效果。顏色的目的在於讓產品希望被注意的焦點,快速的被使用者的找到。UI去引導,而不是選擇?。在灰階的狀態下,使用者如果仍可以辨認出物件的功能及作用,UI就不致於產生大的問題。適當的運用轉場動效,不要過度,並多利用使用者已經認知的慣例。

學習 Axure RP 的 100 天:Day 9. Auto Complete

圖片
輸入關鍵字進行查詢,就會在搜尋框下方出現一個動態面板,提示與使用者輸入關鍵字相關的文字提示,點選就會到相關的頁面(也可士與關鍵字相關的搜尋結果列表)。




學習 Axure RP 的 100 天:Day 8. Appraisal

圖片
給予產品內如評價。
用戶可以依據對內容的喜好給予評點,擊點星星給予評價,也可取消給予的星星。


學習 Axure RP 的 100 天:Day 7. Approve

圖片
當對於產品內容,可能是文章、作品、圖像,感到喜歡,可以給予星星,表示讚賞,也可對星星收回。
也可運用於收藏的情境,點選表示收藏,反之亦然。

情境一:只有當角色是自己時,可對其表示讚賞(或收藏),也可對其收回讚賞(或收藏)。情境二:當角色為不同的人在瀏覽時,只會看到累加的數字。

學習 Axure RP 的 100 天:Day 6. CountDown

圖片
學習 Axure RP 的 100 天:Day 6. CountDown

在某些情境下,有時需要對物件計算倒數計時。

學習 Axure RP 的 100 天:Day 5. PinonScroll

圖片
學習 Axure RP 的 100 天:Day 5. PinonScroll 透過觸發動態圖層的方式,達成當滑鼠向下捲動到特定位置時,左側的內容會鎖定,右側內容,仍可繼續向下滾動。

當滑鼠往上捲回時,在特定的位置處發動態圖層,回覆原始頁面的狀態。

其實,這個互動效果,較適合左側為固定的資料,且不超過瀏覽器的高度為佳(例如:選單、固定的文案說明...),避免產左側產生內容捲軸,造成雙捲軸的情形發生,對於用戶的體驗造成不悅。


學習 Axure RP 的 100 天:Day 4. 結合旋轉木馬 Carousels 的作品展示

圖片
Day 4. 結合旋轉木馬 Carousels 的作品展示

用戶可以透過左、右的箭頭圖示,及下方的縮圖,快速切換到所要看到的圖片。

• 點選箭頭圖示可以左右變更圖片。
• 下方縮圖也會顯示到對應的圖片。
• 點選下方的縮圖,上方的主要圖片也會隨之變更。



學習 Axure RP 的 100 天:Day 3. 點擊搜尋圖示,可展開搜尋框,而當離開搜尋框時會自動關閉搜尋框,只留下搜尋圖示

圖片
Day 3. 點擊搜尋圖示,可展開搜尋框,而當離開搜尋框時會自動關閉搜尋框,只留下搜尋圖示



點選搜尋提示展開搜尋框,並將游標的焦點放在搜尋框內,可直接輸入文案。輸入完成,點選確認V或取消X按鈕,均會將資料送出或清空,恢復原始狀態。點選輸入框外部區域,會關閉輸入框,直接返回搜尋的圖示介面。


學習 Axure RP 的 100 天:Day 2. 透過控制動態物件的 move by 指令,實現進度條漸進出現的結果。

圖片
有時候在載入頁面的時候,系統需要載入的時間,通常這時會利用進度條的方式處理。

這裡,透過控制動態物件的 move by 指令,實現進度條漸進出現的結果。



範例:http://faagx0.axshare.com/#g=1&p=day_2__loading


學習 Axure RP 的 100 天:Day 1. 透過變數來控制onScrollUp與onScrollDown對於表頭內容的顯示與隱藏

圖片
這陣子,網路上大家都在流行學習OOO100天,也東施效顰一下,來個學習Axure100天,希望對於沒有程式設計經驗想要跨入原型設計這個領域有啟發與幫助,也是對自己做個紀錄摘要。
Axure很容易學習嗎?
對於基礎的入門而言是容易的,三小時應該足夠了。學習Axure之前,需要很多的程式設計經驗嗎?
不需要,懷抱一個開放學習的心態即可。學習Axure有哪些好的資源?
Axure官網、Axure RP 使用者社群、Axure RP User’s Club悠識...,Google上一堆資源。學習程式設計比學習Axure來得重要?
當你已經學習到進階時,有程式的基礎概念一定會有幫助的。

我的學習Axure100天,不會是連續的100天,也不會是循序漸進的方式.會以開發網站實際上,常遇到的問題為出發點,至於要花多少天完成這100個項目,我也不知,盡力而為了。
Day 1. 透過變數來控制onScrollUp與onScrollDown對於表頭內容的顯示與隱藏 嘗試解決幾種情境:

ex 1. 滑鼠向下捲動時,讓用戶的注意力保持在閱讀內容上,不被其他導覽功能影響,但滑鼠向上捲回時,則認為用戶是希望尋找其他功能選項,因此向上捲動時,此時主導覽列出現。ex 2. 將主要功能導覽維持在頁面上方不動,當向下捲動頁面時,次導覽選項會出現在主導覽列下方,方便用戶快速切換選擇。

範例:http://faagx0.axshare.com/#g=1&p=day_1






Design Better Forms 讀後心得

Design Better Formshttps://uxdesign.cc/design-better-forms-96fadca0f49c#.r5e8nzwg3 對於這篇文章當中所舉的範例,當中有一些有不同的看法,如下: Forms should be one column應該是裝置的特性或版面空間的視覺流動來決定,直接做這樣的結論,過於武斷。Show all selection options if under 6同意他說描述的使用原則,但他所採取的呈現樣式,看來像Tab就不慨苟同了,是否反而會讓用戶產的認知產產不同的預期結果,例如:是切換到另一個內容,用RadioBottom是不是更好的選擇呢?Place checkboxes (and radios) underneath each other for scannability原則上是對的,同上所說應該是裝置的特性或版面空間的視覺流動來決定,直接做這樣的結論,過於武斷。Use inline validation after the user fills out the field (unless it helps them while in the process)內嵌的即時驗證,個人覺得很好啊!只要同時顯示錯誤的原因讓使用者可以及時修改即可。Ditch the * and denote optional fields以台灣的使用習慣,反而是特別標注*,而非選填option。這個可能需要是情境來選擇,例如:整個標單中都是必填,只有單一項或或少數是選填,也許適合。
以上是我對於這篇文章觀後的回饋思考,也歡迎補充。