web-archive-me.com » ME » A » AKANELEE.ME

Total: 398

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • 初學者的 Prototype « 嫁給RD的 UI Designer
    只要會動的 可操作的 還沒正式發布上線的 都能被稱為 Prototype 參考 用 Hype3 做 Prototype 基礎過場 一文 這裡的 Prototype 是用 Mockup 做的 低保真原型 Wireframe 可操作 高保真原型 Mockup 可操作 已經切圖交給RD 套版 尚未套後台資料 先用假資料 的也會被稱為高保真原型 Prototype 最重要的就是 可以被操作 所以手繪撇一撇數張 Wireframe 做成可以被操作的模式 就能叫它做 Prototype 像上圖所示 幾張 Mockup 串一串設定操作範圍 可以被操作 也是 Prototype 結論 中國有很多奇怪的簡中譯文 如果跟著把 Wireframe Mockup Prototype 通通喊做原型的時候 就分不出來對方講的原型指的是哪一種 硬要翻成中文不如稱它是 線框稿 視覺稿 原型 當然最好的情況下還是使用英文吧 如果溝通的對象 尤其是交辦工作的人開口就是 原型 請一定要問清楚是哪一種 Wireframe Mockup 還是 Prototype 不然雞同鴨講之後的下場絕對讓專案小組雞飛狗跳 Posted by Akane Lee May

    Original URL path: http://blog.akanelee.me/posts/276909-beginners-of-prototype (2016-05-02)
    Open archived version from archive

  • Tag : prototype « 嫁給RD的 UI Designer
    只要會寫簡報 PTT 或是 Keynote 就做的出來 所以連 Planner 和 PM 也保證上手無問題 Read on 初學者的 Prototype May 22 2015 Comments 我竟然忘記寫這篇 和群裡設計師聊 發現 Prototype Wireframe Mockup 因為翻譯有時候皆統稱為 原型 的關係 導致大混淆 所以來說明下這三者的不同 這是最簡單的分法 擬真 模擬真實最後產出 不是擬物風 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12 胡說八道 37 UI雜談 32

    Original URL path: http://blog.akanelee.me/tags/prototype (2016-05-02)
    Open archived version from archive

  • 活用狩野分析搞定意見分岐 « 嫁給RD的 UI Designer
    Q 有疑問 Questionable 表示有疑問的結果 一般不會出現這個結果 除非這個問題的問法不合理 受測者沒有很好地理解問題 或者是在填寫問題答案時出現錯誤 出錯乃 UX 常事 大俠請重新來過 優先度 M Must be O One dimensional A Attractive I Indifferent 1 質量特性評價表 剛提到 6 種需求 那我們怎麼知道該功能屬於哪個需求呢 可以透過 質量特性評價表 來取得數據 針對某功能請使用者 業主 客戶回答正向問題和負向問題 正向問題 具備這個功能時 你覺得如何 負向問題 沒有這個功能時 你覺得如何 喜歡 應該的 無所謂 能忍受 不喜歡 簡單來說就是遇到意見分岐 發問卷下去給大家寫 問卷只有 2 題 選項就這 5 個 寫完回收統計數據就知道這個功能到底受不受使用者 業主重視了 有時候使用者 業主很傲驕的 嘴巴上不會給你心裡想的真正答案 也有可能他們真的沒有想法只是隨口講講 質化研究在處理意見分岐要花太多時間 改用量化較能快速取得方向 2 KANO 評價結果分類對照表 問卷填完回收後 可以對照 KANO 評價結果分類對照表 進行分析 每一張問卷都會取得一個英文代號 需求類型 A 魅力型需求 O 期望 M 基本需求 I 無差異需求 R 不需要 Q 有疑問 3 評價結果 根據剛剛整理的問卷數據 算出每個英文代號的百分比 根據上方我亂掰的數據 可以得出結果是 I I 是 無差異需求 也就是有沒有做都不影響使用者滿意度 如果只針對單一功能做分析 偷懶的話到這個步驟就可以了 如果同時對數個功能做優先排序 請繼續下一個步驟 優先順序為 M O A I 4 敏感性分析結果 這個步驟要計算分數 取得某功能滿意 不滿意的影響力數據 對照 功能評價結果 的百分比數據 套下列公式計算 記得先算 括號裡的數字 SI 滿意影響力 DSI 不滿意影響力 計算公式 SI A O A O M I DSI O M A O M I 1 SI 40 90 0 44 DSI 20 90 x 1 0 22 5 KANO 模型分析結果 參考下圖 原點在左上角 對照敏感性分析結果把每個功能座落在哪一個位置標出來 在灰色圈子裡的就是 質量特性敏感性不大 可暫時不予以考慮的功能 離原點越 遠 的優先程度越重 結論 整個狩野分析的操作步驟為 發問卷 正向問題 負向問題 5 選1 對照 評價結果分類表 每張問卷都有一個英文代號 統計完所有的英文代號數量 換算成百分比 套用計算公式 算出 SI 滿意影響力和 DSI 不滿意影響力的數值 用影響力數值當座標 把該功能標在 KANO 模型分析結果上 開會還在吵要不要做哪個功能嗎 工時這麼短 要做的事那麼多 卻不能決定哪個先哪個後嗎 狩野分析能用量化的方式幫你快速決定要或不要 只求真正有決策權的人在跑完狩野分析看到報告文件後能多考慮一下 產品不是功能越多越好用啊 反正問題就那 2 項 隨時備個幾份帶去開會 再爭執要不要做某功能就發下去填一填會後統計交分析報告 還是沒辦法克服 不加新功能就會死恐慌症 的話我也不知道該怎麼辦了 orz 延伸閱讀 04 译

    Original URL path: http://blog.akanelee.me/posts/276423-use-kono-mode (2016-05-02)
    Open archived version from archive

  • Tag : ux « 嫁給RD的 UI Designer
    2013 Comments 什麼是互動設計 互動設計這個詞這幾年很常見 包山包海感覺上只要是各種媒體上看到會動都可以叫互動設計 有一種說法是 設計出互動產品 提供人類在日常生活或工作中使用 更詳細的解釋則是 互動設計是人類互動及溝通上的空間 它是一種以使用者的需求與經驗為出發點 創造出人類與科技的完美連結 IDEO 創始人在 1984 年的一次設計會議上提出 他剛開始將互動設計命名為 軟面 Soft Face 但這名字很容易讓人想起當時流行的玩具 椰菜娃娃 後來將名字改為 Interaction Design 從 Soft Face 這個最早期的命名方式可以看的互動設計的特性 沒有規則可讓人任意塑造扭曲 是在最表層如臉孔一般的存在 Read on 使用者經驗藏寶圖 敘述故事 找出中心思想 December 12 2013 Comments 雖說很對不起邀我來參加聚會的主辦單位 但 UI 和 RD 擅長的領域差不多就是聖母峰和馬里亞納海溝的差別 為了不浪費這段人人都在補充新知我卻蹲在旁邊玩保衛蘿蔔2的時間 還是來寫點文章表示我也有努力好了 根據這張藏寶圖的順序 就來談談 敘述故事 找出中心思想 Read on 使用者經驗藏寶圖 創建人物 December 18 2013 Comments 相信各位應該看過前一篇 使用者經驗藏寶圖 敘述故事 找出中心思想 了 也相信一定有人用鼻孔噴氣 什麼鬼話連篇 拿灰姑娘出來當例子 小孩子玩家家酒 這個階段我就認真寫好了 在 創建人物 這個階段 其實就是研究方法 Persona 人物誌 都把研究方法拿出來講了 夠認真了吧 Read on 初學者的 Functional Map December 23 2013 Comments 功能規格書 產品規格書 系統分析 需求分析等等 是 PM 或 SA 或其他同事的工作 反正不是 UI 的工作 很多 UI 不願意去接觸這類文件 就說了字太多圖太少設計人看不下去 有沒有懶人包 但看不懂這些文件的 UI 絕不能被稱為好 UI 連這個軟體要做什麼都不熟悉 一知半解 要怎麼說服別人設計的介面是適合這套軟體 或網站 的好介面 Read on 初學者的 UI Flow December 25 2013 Comments UI Flow 和 Funtional Map 算是最多人容易搞混的兩種圖表吧 Functional Map 主要目的在 將抽象的需求轉變成能被實現的功能 而 UI Flow 則是 妥善安排功能與資訊在頁面之間的操作動線 兩者很明顯目的不同 所以沒有什麼重工或是很麻煩之類的藉口可以逃避不做 Read on Guideline 的重要性 December 31 2013 Comments 強調再強調 一定要先看過 Guideline 後再來做介面設計 卻被人嗤之以鼻 說不用看一樣可以產出啊幹嘛要花這種時間 如果不是你的產品太簡單 就是都用內建元素或抄襲湊合了事 你同事人太好 幫忙擦屁股了 你同事程度跟你一樣 搞不清楚狀況 別說很多 UI 高手們也老是跳脫 Guideline 設計啊 他們哪位不是對 Guideline 熟到可以朗朗上口到幾乎可以報頁碼的 不懂 Guideline 的就只能當美工用 連視覺設計都稱不上 Read on 3 種應用程式風格 January 6 2014 Comments 不要再叫 PM 或 BD 畫 Wieframe 他們真的不是 UI UX 的專業人士 如果注重專業 在約還沒簽 規格也還沒訂出來的時候就該把 UX 加進工作流程裡了 PM 最重要的工作是控管時程 各部門單位間溝通 BD 是廣義的 Marketing 也不該是這個位子的人在搞介面 畫 Wireframe 的是 UX 啊 UX Read on 使用者經驗分層元素 January 10 2014 Comments 想了解 UI UX 就一定要了解這張圖 這是 Jesse James Garrett 在 2000 年發表的使用者經驗元素一書中所提出 使用者的經驗可分成抽象到具體 也就是由策略 範圍 結構 骨架 表層所構成 圖片上有原作者的說明大家自己看吧 Read on UI UX 之天下武功出少林 January 13 2014 Comments 這算是我看了這麼多資料所做出來最大的整理吧 說穿了其實不管是哪位 UI UX 大師 講的都是同一件事情 要怎麼做才能讓使用者好用 從這張圖表有看出什麼了嗎 第一個直列 白底 就是我之前提到的 使用者經驗分層元素 第二個直列 黃底 是 使用者經驗藏寶圖 第三個直列 藍底 是 十大易用性原則 使用者經驗分層元素裡並沒有說明文件 這項是我自己加上去的 為了讓整個專案更完整 並且能夠傳承下去 Read on 我是UID 不是UXD January 15 2014 Comments 圖片出處 THE DISCIPLINES OF USER EXPERIENCE 當聽到有人說 我是做 UX 的 都不會覺得很奇怪嗎 使用者經驗要怎麼被 做 出來 要解釋 UID 和 UXD 的不同就得拿出這張圖 它很清楚畫出 UID 和 UXD 的關連和差異 你可以看到紅色大框的 使用者經驗設計 中包含訊息架構

    Original URL path: http://blog.akanelee.me/tags/ux (2016-05-02)
    Open archived version from archive

  • Tag : 研究方法 « 嫁給RD的 UI Designer
    Planner 桌上都該擺一本 不知道報告 企劃書怎麼寫的時候拿來跑一下實驗很好用 從中我認識到 狩野分析 參考 UX 設計的方法 專案初始 這篇文 當時預期狩野分析適合用在專案初始 分析這個功能要不要做 最近簡單地跑了一遍 來寫點筆記 步驟雖然多 但只要會加減乘除就行了 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12 胡說八道 37 UI雜談 32 實作技巧 27 軟體工具 22 實戰備忘 14 聽演講心得 10 Web 9 UX相關 10 好書推薦 15 旅遊見聞 12

    Original URL path: http://blog.akanelee.me/tags/%E7%A0%94%E7%A9%B6%E6%96%B9%E6%B3%95 (2016-05-02)
    Open archived version from archive

  • Tag : 狩野分析 « 嫁給RD的 UI Designer
    Planner 桌上都該擺一本 不知道報告 企劃書怎麼寫的時候拿來跑一下實驗很好用 從中我認識到 狩野分析 參考 UX 設計的方法 專案初始 這篇文 當時預期狩野分析適合用在專案初始 分析這個功能要不要做 最近簡單地跑了一遍 來寫點筆記 步驟雖然多 但只要會加減乘除就行了 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12 胡說八道 37 UI雜談 32 實作技巧 27 軟體工具 22 實戰備忘 14 聽演講心得 10 Web 9 UX相關 10 好書推薦 15 旅遊見聞 12

    Original URL path: http://blog.akanelee.me/tags/%E7%8B%A9%E9%87%8E%E5%88%86%E6%9E%90 (2016-05-02)
    Open archived version from archive

  • Flow Chart 和 UI Flow « 嫁給RD的 UI Designer
    走右邊 選 否 走左邊就好了 對 RD 來說 寫程式前都必需先知道 邏輯 也就是由各種 判斷 組成的操作架構 對 UI 而言邏輯也很重要 不然使用者操作後要給他什麼回應 最陽春的會員登入 以 會員登入 為例 使用者輸入帳號密碼 輸入正確就自動跳轉到會員資訊頁 輸入錯誤就提示錯誤 光從 Functional Map 就想畫 UI Flow 常常忽略 使用者操作錯誤怎麼辦 最後一刻才發現有缺就是 UI 緊急加畫漏掉的頁面 RD 苦命塞功能不優雅 提示錯誤又不是放下一個階段或是有空再補的東西 頁面和程式也不是靠嘴巴在畫在寫 亂輸入就給你驗證碼 好像很簡單喔 才不只這樣 實際畫起來會發現很多東西在 UI Flow 上很容易忽略沒考慮到的部份 而且怎麼可能就只有這樣不加功能 有時候使用者會一直輸入錯誤 合理猜想是有人試著盜帳號 常見的阻擋方法是讓輸入多次錯誤的使用者多填一個驗證碼的欄位 所以 Flow Chart 就變成 上圖只是簡單的流程示範 不過是隨口多一句 喂 幫我加個驗證碼功能 Flow Chart 就會突然肥一截 真正的會員登入驗證還有更多花樣以及安全性考量 比如登入錯誤 3 次就多提示一句 忘記密碼 等等 更狠的直接鎖帳號請使用者找客服申訴 Flow Chart 和 UI Flow 相輔相成 甚至是先有 Flow Chart 才有 UI Flow 在沒有 Flow Chart 不知道要處理多少判斷時就產出 UI Flow 規劃不周掉頁面漏功能的機率非常非常高 若只有 UI Flow 沒有 Flow Chart RD 勉勉強強可以憑畫面想像 Flow Chart 判斷式怎麼下 但系統越大會容易出包有 Bug 依 RD 經驗值決定出包機率 但連 UI Flow 都沒有 光憑幾張 Wireframe 或 Mockup 根本就是瞎子摸象 看單張靜態圖 RD 不會知道頁面怎麼串 純靠腦補不錯才怪 如果什麼都不給 直接扔 Prototype 給 RD 叫他照抄 說一模一樣做一個出來 很簡單吧 RD 還要每個畫面每個按鈕按都戳戳看 試過各種錯誤才會知道功能怎麼接 對 RD 是有多大恨這樣整人家 參考資料 流程圖 MBA智库百科 流程圖說明 就 UI Designer 的角度可以把 Flow Chart 看成 這個情境下使用者怎麼操作完成任務 軟體怎麼回應 把 UI Flow 延伸為 因為使用者這樣操作 以及我們有這些功能和資訊要呈現 所以頁面和頁面之間如此串接 UI Designer 不一定要會畫 Flow Chart 但一定要看得懂 常見流程圖符號是固定的 不要因為長得醜就自己設計個新樣式 RD 絕對來翻桌 有句名言 婚前腦袋進的水就是婚後流的淚 套到軟體開發上 開工前少花的腦就是開工後要傷的肝 有多少功能前期沒想到 就有多少工時後期沒料到 Posted by Akane Lee May 15 2015 Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 用 Hype3 做 Prototype 基礎過場 活用狩野分析搞定意見分岐 Akane Lee Recent Posts UI 設計入門班

    Original URL path: http://blog.akanelee.me/posts/276159-flow-chart-and-ui-flow (2016-05-02)
    Open archived version from archive

  • 用 Hype3 做 Prototype:基礎過場 « 嫁給RD的 UI Designer
    2 既然是 iPhone 的 Prototype 來改一下場景尺寸 我用的是 640x1136px 畫質比較細 3 因為畫面是長型的 所以我把時間軸和圖層從下方挪到右邊去 匯入圖檔 4 手機截圖 直接扔進 Hype3 裡 表示做自己的東西實可以直接拿 Mockup 的 jpg 或 jpg 圖直接上 設定動作範圍 5 來做 動作觸發的範圍 在圖上先拉個矩形 6 右邊選單設定無填色 無筆劃 7 下方 Tab Bar 第 2 顆的位置就有一塊透明的區域 也就是 動作觸發的範圍 8 設定動作 雖然手機上不會有游標 但我還是喜歡把可觸發的區域游標換成手指 在 Browser 預覽時可以快速確認自己Link設對了沒有 9 記得 所有場景 圖層什麼的 要重新命名成有意義的名字 當頁數和元件一多時才不容易出錯 10 像 Keynote 一樣 可以一次做了好幾個元件 選起來好拷貝到其他場景貼上 圖層前後會影響操作和元件顯示 如果有時候發現某個地方怎麼點都沒效果 或是看不到 檢查下圖層順序 過場方式 11 點著個 BTN 播放中的頁面是由右往左推進 12 所以記得把過場動效改成 推動 由右往左 13 秒數我習慣設 0 3s 依個人感覺不同 請自己試看看 14 這個 Btn 點下去 會由下往上出現歌曲列表頁 記得設定 推動 由下往上 15 點了 完成 後 頁面會由上往下 當很多頁面都有一樣的回前頁 Tab 的Link要處理時 可以先做完一頁 剩下 Copy Past 就好 匯出 HTML 檔 選 HTML5 文件夾 檔名命名好 會出現一個 HTML 檔和一個資料夾 把這兩個檔傳到伺服器上 就可以用手機開網址測試了 如果想預覽自己做的如何 工具列上有個 Chrome 或 Safari 的 icon 按下去就是了 不過它不是即時的 每次修改存檔就要再點一次這 icon 重新產生預覽 直接點 Browser 重新整理看到的會是修改前的樣子 Prototype 專用 Browser Frameless a full screen web browser 官網 http stakes github io Frameless App Store https itunes apple com us app id933580264 這是個連 狀態列 都沒有 真正 全螢幕 的瀏覽器 免費 輸入你的Prototype網址 就可以像真的 App 一樣 用手機做測試了 祝順利 範例 上面做的範例請用手機開 http goo gl 0X0sWV 或是掃這個 QRcode 最好的瀏覽方式請用 Frameless 開啟 熟練了大約20分鐘內絕對搞的定上述步驟 範例有些細節 瑕疵 落差就不調整了 比如由下往上推不該是真的推走 有些更精緻的設定我留著下次經驗分享 Posted by Akane Lee April 25 2015 prototype hype3 Frameless Tweet Comments Please enable JavaScript to view the

    Original URL path: http://blog.akanelee.me/posts/261813-hype3-prototype-basics-transitions (2016-05-02)
    Open archived version from archive



  •