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".
  • 愛用切圖神器:Slicy « 嫁給RD的 UI Designer
    得稍微記一下 slicy 圖層命名的格式 官網提供的 Examples 裡面有 5 個資料夾 Basic Tagging 基本標籤 圖層或群組名稱的字尾打上 png就好了 Explicit Sizing 設定切圖尺寸 如果切圖為特定尺寸 可以用這3種方式設定 使用矩型工具 形狀圖層 畫出欲裁切的尺寸 將圖層名稱設為 bounds 輸出切圖時不會看到這個圖層 方型遮色片 向量遮色片 我愛用第一種方式 把目標圖層和 bounds 放在同個群組裡 群組名稱改成 png 未來維護比較方便 Mac Icon 輸出 ico 做 MAC 的icon用 圖層名稱字尾設成 ico就好了 Magic Retina Auto 1x 做2x圖 自動輸出1x 這是我最愛 Slicy 的原因 做 2x 的 PSD 檔 自動輸出 1x 切圖 只要在圖層名稱字尾加上 2x png 就好 做大圖縮小就是會遇到 101x139px的 2x 圖要怎麼縮成 1x 的問題 Slicy 會自動幫你把 2x 圖加上1px的空白 讓尺寸變成偶數後再縮小輸出 1x 檔 比如 101x139px 會變成 102x140px 和 51x70px 如果你對圖檔精緻度沒有嚴格到以 1px 為單位 縮小後邊緣有點糊也無所謂的話 這功能真的超歡樂的 Magic Retina Auto 2x 做1x圖檔 自動輸出2x 做1x圖檔 自動輸出2x 只要在圖層名稱字尾加上 png 2x 就好 記得要做向量圖啊 不然放大成 2x 還是會糊掉的 Magic Retina No Auto 1x 做2x圖 不輸出1x 一樣把字尾都設成 2x png 在所有圖層的最上方新增一個空白圖層命名為 lc auto 1x off 其它 我很喜歡 Slicy 的icon設計 原本這款 App 剛上架的時候叫 Layer Cake PS圖層很多 取名叫千層糕也很合理 之後改名為 Slicy 在 google 搜尋上幫了大忙 我想找相關資料時不會一直出現食物 希望 Sketch 也換個名稱 這種大眾常用名詞很難搜到他家的東西 Slicy 雖說要 890 元 上架以來好像沒有打過折扣 以省下來的時間來講其實很便宜 而且開發商是知名公司 MacRabbit 不會變成 App 孤兒 提 Espresso RD 就知道了吧 原本切圖要另外拉框搞很久 現在單個 PSD 檔不到半小時就能搞定 加上來回修改重出 Slicy 幫忙省下的心力 這 app 就算賣 2 倍價我也會入手 輕鬆方便太多了啊 Posted by Akane Lee January 26 2014 Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 免費切圖神器 Cut Slice me 關於使用者經驗測試 Akane Lee Recent Posts UI

    Original URL path: http://blog.akanelee.me/posts/177345-favorite-diagram-artifact-slicy (2016-05-02)
    Open archived version from archive

  • 免費切圖神器:Cut&Slice me « 嫁給RD的 UI Designer
    UI 在製作按鈕 切圖輸出 一直到 RD 套圖都很有幫助 輸出格式 Cut Slice me 可以輸出 3 種格式喔 iOS Android Web 都包了 iOS 2x 自動縮小 1x Android hdpi mdpi xdpi xxdpi Web 1x Cut Slice me 所有的控制碼如 都是半形 它不吃全形喔 其它 官網首頁最下方的問與答記得看一下 免費的給你用還嫌 我超級討厭亂七八糟的圖層 從原始檔中可以看到設計師的邏輯思維 沒做好心理準備就跟邏輯太差的人說話很容易爆腦血管 為了使用 Cut Slice me 會被強迫養成整理圖層的習慣 一定要大力推廣一下 雖然 Cut Slice me 很好用沒錯 不過也是有一些問題存在 比如 Android 輸出尺寸不夠用了 之類 個人還是習慣用 Slicy 下次會介紹這套的 Posted by Akane Lee January 24 2014 Tweet Comments Please enable

    Original URL path: http://blog.akanelee.me/posts/177177-free-diagram-artifact-cut (2016-05-02)
    Open archived version from archive

  • 標示神器:MarkMan « 嫁給RD的 UI Designer
    所有的快速鍵正好和我習慣的一樣 用起來十分得心應手 如果你有在用 Photoshop 或 Illustrator 根本無痛切換 為了按 cmd Z 我左手長期黏住鍵盤最左端 右手則黏在 Wacom 板上 快速鍵靠左手也就夠了 自動標示長度 快速鍵 cmd L 或是 cmd 1 重覆按 cmd L 或 cmd 1 切換直線或橫線 標示 A 元件和 B 元件之間的相對間距非常迅速 自動探測元素邊緣的功能有時候不那麼精準 偶爾會差 1 2 個 px 可以拉動線條兩端的截點調整 調整截點位置時會自動出現參考線輔助對齊 配合放大畫面就能避免誤差 自動計算尺寸位置 快速鍵 cmd P 或是 cmd 2 自動標示框選區域的座標和尺寸 通常被我拿來標示切圖的圖檔尺寸 個人希望作者能增加一個切換座標顯示的功能 Android 螢幕尺寸太多種 需要的是距離 座標反而不那麼重要 這時候就會希望能隱藏座標文字 自動標示色碼 快速鍵 cmd I 或是 cmd 3 和 PS 滴管快速鍵一樣 最免動腦操作的功能 游標點到哪就自動標示該點的色碼 可以切換成十進位或十六進位 2 種色碼 出文件前記得先問問 RD 他需要哪一種色碼 手寫文字註解 快速鍵 cmd T 或是 cmd 4 和 PS 文字工具快速鍵一樣 圖檔名稱 字體 字級等等就得用這個工具標示了 有什麼附加說明也打上去吧 其它 MarkMan 還有很多方便的功能 就讓大家自己去試看看了 反正這款應用程式是免費的 裝來玩玩看很不錯 滑鼠右鍵選單在每個標示元件上出現的選項略有不同 它支持 Retina 模式 遇到 2x 結尾的文件名 會在載入時自動縮小 50 喔 因為吃PSD檔 而且即時更新 表示你可以一邊改PSD一邊標文件 只要 PSD 檔檔名加上 2x 就不用另存 1x 圖了 方便到爆的功能 這絕對是款能加快標示文件製作的神器 功能簡單但該有的都有了 剩下細節部份就等作者有空改版會更完美囉 騰訊 CDC 部門 既用戶研究與體驗設計中心 有款應用程式照抄 MarkMan 叫 Dorado 評價很差 用 Mac 的就不用想了 這款只有 Win 版 而且 bug 不少 操控不順又綁手綁腳 嗯 我有提到騰訊是抄 MarkMan 吧 Posted by Akane Lee January 22 2014 Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 我是UID 不是UXD 免費切圖神器 Cut Slice me Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶

    Original URL path: http://blog.akanelee.me/posts/176988-mark-artifact-markman (2016-05-02)
    Open archived version from archive

  • 我是UID,不是UXD « 嫁給RD的 UI Designer
    User Interface Design 被歸類在灰色底的 Interaction Design 底下 Interaction Design 屬於 User Experience Design 的一部份 之前寫過的文章 互動設計概論 就有提到 互動設計可分成三大類 透過螢幕的體驗 互動產品 提供服務 透過螢幕的體驗就是User Interface 現在明白為什麼我堅持 UX 包含 UI 但 UI 不能被稱做 UX 了吧 就像是你會說獨角仙是昆蟲的一種 但決不會把昆蟲都叫做獨角仙一樣 User Interface Design 只是 User Experience Design 其中的一部份而已 凡是設計 使用者體驗 有關的都能被稱為 UXD UXD 是非常廣的領域 不會是一個人就能做完的事 BD 向客戶展示說明 寫文案算不算在做 UXD PM 跟客戶訪談需求算不算在做 UXD 整天開著 Photoshop 在設計 UI 畫 Mockup 也是在做 UXD 你不能說 RD 在寫程式所以和 UXD 無關 這些職務都在做和 UXD 有關的工作 曾去雷過一次說要為了全台人民 Open Data 其實是 Startup 的聚會 聚會上有人說他的工作都在畫 Wireframe 他是 UXD 我當時的說法是 Wireframe 在畫介面吧 我會算它是 UI UX 對我而言比較像是做研究 產出文件 和介面有關的我都會稱他是 UI 當然他說的沒錯 UI 是 UX 的一部份 他當然可以稱自己在做 UXD 只是我會習慣分得更細 跟介面有關的通通是 User Experience Design 裡的 Interaction Design 其中的 User Interface Design 這隻是昆蟲 那隻也是昆蟲 這說法沒錯 但我比較喜歡這隻是獨角仙 那隻是鍬形蟲更明確的稱呼方式 界門綱目科屬種 你想用更細的單位 甚至都用學名都可以 從 使用者經驗分層元素 來看 到第 4 層骨架才出現 Interface Design 第 5 層表層才是 Visul Design 再仔細看看其他 3 層的內容 你覺得使用者 客戶 需求通常會是誰去訪談 網站目標是誰要去訂 開功能 SPEC 是誰的工作 訊息架構 IA 是誰要處理 UX 不是一個人的責任 這篇寫得很好 可以去看一下 這些年 被UX兩個字害慘的設計師 UXD 和 UID 是完全不同的領域 所以我只會稱呼自己是 UI Designer 或是 我做 UI 的 如果你聽到有人自稱 我做 UX 的 微笑就好 圖片出處 UX is not UI 延伸閱讀 10 Most Common Misconceptions About User Experience Design Posted by Akane Lee January 15 2014 UI ux Tweet Comments Please enable JavaScript to view the comments powered

    Original URL path: http://blog.akanelee.me/posts/175758-im-a-uid-is-not-uxd (2016-05-02)
    Open archived version from archive

  • UI/UX 之天下武功出少林 « 嫁給RD的 UI Designer
    天下武功出少林 說穿了不就那麼回事 除了使用者經驗藏寶圖還是個大坑之外 其他兩項已經介紹過了 初學者最難理解的 Functional Map UI Flow Wireframe 等這個 BLOG 也都有文章說明 真看不懂的可以去Google 有在看武俠小說就會知道 人人都不要命的在搶上古秘籍 但秘籍也是人寫的 現代科技更發達 沒道理古人可以現代人卻辦不到 最重要的是要動腦筋啊 如果你有動腦筋就會發現這份圖表其實還可以再拆得更細 比如 反應與提示 各種狀態與突發狀況 等 有心學習UI UX的話 可以把你收集到的各種資料分類歸納在這份圖表之後 形成巨大的樹狀結構 個人覺得不管是什麼學問都可以用樹狀結構硬拆細分下去 再從支微末節一點點累積知識經驗 存到夠多就能大略拼湊出這棵樹的模樣 我就連學習繪畫和音樂也都用這種方式 設計是解決問題的方法 UI UX 是種邏輯 是科學 Posted by Akane Lee January 13 2014 UI ux Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 使用者經驗分層元素 我是UID 不是UXD Akane Lee Recent Posts

    Original URL path: http://blog.akanelee.me/posts/175637-ui-ux-world-martial-arts-of-shaolin (2016-05-02)
    Open archived version from archive

  • 使用者經驗分層元素 « 嫁給RD的 UI Designer
    FB 後能對餐廳按讚或按幹這樣而已 專案規模瞬間縮小很多 延伸閱讀 使用者經驗藏寶圖 敘述故事 找出中心思想 範圍 找出需求與目的後以需求為基礎 整理出所有使用者可能會需要的資訊及功能 以愉快且有效的運用各種功能為出發點建構合理的互動模式與流程 這個階段就是把抽象需求內容轉成可實行的功能 並訂定出 Spec 把所有需要的資訊 功能等全部列出 並歸納分類 以 策略 層決議的目標和需求為出發點 考慮各種操作方式 再強調一次 同樣都是音樂播放器 列表型的和很炫型的就算功能大同小異 操作方式和介面設計還是會差很多 把所有可能會用上的功能 所有必需呈現的資訊 圖片等等全部用樹狀圖條列出來 方便 UI UX 未來畫 UI Flow 方便 SA 制定 API 也方便 RD 計算人日 PM 控管專案時程 好處多多 發現沒 這階段就是在做 Functional Map 啦 延伸閱讀 初學者的 Functional Map 結構 把所有資訊整合起來 依使用者能直覺理解的方式組織成完整的概念 既然 範圍 層在製作 Functional Map 那 結構 層就是在做 UI Flow 了 這個階段必需定義資訊 功能等要用什麼方式呈現 比如說 iPhone 上小張的美食照片只是預覽功能 需要 開大圖 那大圖要怎麼個開法 點擊放大 只放大單張圖嗎 需不需要 Page Control 還是在該頁把手機橫拿就會自動把圖片放大滿版 這階段訂定的 Flow 會左右介面的長相 延伸閱讀 初學者的 UI Flow 骨架 結合介面設計 資訊設計 導覽設計三者將資訊做視覺化的呈現 協助使用者理解資訊 畫 Wireframe 的時候到了 之前已寫過很多關於 Wireframe 的文章 就不多廢話 延伸閱讀 什麼是 Wireframe 為什麼要畫3次 Wireframe 表層 以視覺與感覺為基礎 設計介面元素如文字 頁面的視覺圖像 導覽元件等 簡單來說就是 最終這個 App Web 要帶給人什麼感覺 要注意的事項太多了 Guideline UI Style Graphic 上 Dribbble 看看高手們的作品找靈感吧 在這階段牽涉的東西非常廣泛 不止是視覺 連聲音 震動等等都可包含在內 隻字片語無法完整表達 有機會我再寫新的心得文章 又在挖坑了 延伸閱讀 Photoshop技巧 圖片出處 http www sccc premiumdw com web202 the user experience 書 http www jjg net elements 當你看到這行字 表示文章已大略看過 多少了解我想表達什麼 請捲到最上層重看一遍 Jesse James Garrett 提出的這 2 張圖 相信能夠更理解使用者經驗元素和實現方式 題外話 有沒有發現什麼端倪了呢 當手上的理論和資料一筆筆分開來看都沒什麼感覺 整理分析後再合在一起就很有種 天下武功出少林 的感覺 說穿了天底下所有的事都有一定的軌跡可循 包含 UI UX 很多大師的理論資料看到後來都在講同一件事情 只是舉的例子 切入角度 實行的手法略有不同罷了 就跟無論什麼專案 拆分到最後就只是 需求 和 功能 一樣 Posted by Akane Lee January 10 2014 ux 初學者 Tweet Comments Please enable JavaScript to view the comments powered by Disqus

    Original URL path: http://blog.akanelee.me/posts/175085-user-experience-stratification-elements (2016-05-02)
    Open archived version from archive

  • 3 種應用程式風格 « 嫁給RD的 UI Designer
    App 最好考慮使用 公用型應用程式 的設計風格 以下內容取自 iPhone User Experience 簡單法則 這本書 截圖和圖片說明是我加上去的 公用型應用程式 可讓使用者快速地取得特定類型的資訊 或執行經嚴格定義的工作 如天氣 股票 交通報導 運動比分等 大多數公用應用程式包含 標準的使用者介面元件 簡單的流程和版面 最少的設定 標準的使用者介面元件 使用 Human interface guidelines 中所列出的標準使用者介面 選擇頁 info鈕 指示額外頁數的燈號 Yahoo 天氣 標準公用型應用程式 每天都會打開 看一眼就關掉的 App 簡單的流程和版面 容易掃視的版面 其中只包含最重要的資訊 工作流程的精簡 內建的時間 App 設定好後就不太需要再動到它 這一頁也是看一眼就會關掉的功能 最少的設定 通常第一次啟用後就可直接使用 設定過程是不必要的 或者維持最基本的即可 內建的備忘錄 沒有設定 新增 打字 就是了 產出型應用程式 功能比公用應用程式更完整 使用時間會依照場合及工作有所不同 大多數產出型應用程式包含 階層式結構 快速鍵和捷徑 階層式結構 幾乎所有產出型應用程式都有包含列表和細節檢視的階層式結構 列表檢視包含一份可以捲動的項目 如文字 圖例 視訊 列表 擁有索引標籤控制可以導覽到應用程式的其他部分 細節檢視提供更多關於列表資訊 及和這些項目有關的工具 Day One 我最愛的 App 介面設計作的很棒 層級分明 操作時會有種 啊 好貼心呢 的感覺 快速鍵和捷徑 產出型應用程式的訊息 搜尋或表格通常需要輸入文字 這些工作在行動環境中執行的難度較高 鍵盤按鍵小 複雜度增加 所以產出應用型程式應儘可能將文字輸入的控制方式減少 改版後的 Evernote 被我打入冷宮 首頁太花字又小 看得很辛苦 不是什麼東西都攤在首頁就等於好用啊 沉浸式應用程式 用來玩遊戲 觀看媒體 和執行專業工作 時間可能持續幾分鐘到幾小時 大多數沉浸式應用程式包含 將重點放在內容上 自訂使用者經驗 將重點放在內容上 沉浸式應用程式可能會佔用整個螢幕 包含顯示電池和網路資訊的狀態列 設定和其他控制項目依程式不同 出現的時機也不一樣 機械迷城 解謎遊戲首選 有 MAC 版也有 iPad 版 我都買了 螢幕大一點玩起來比較過癮 自訂使用者經驗 對於不是 Human interface guidelines 中列出的標準控制項目 沉浸式應用程式通常會提供完整的 自訂 使用者經驗 在自訂使用者經驗前請先確認是否因為設計目標無法用公用程式或產出型來達成才這麼做 kingdom rush 最愛手機遊戲之一 前後兩代都必買 看完這 3 種應用程式風格的介紹 能理解為什麼 UX 屬於策略面 而且必需在開發前期就加入了嗎 客戶 目標 會引導介面設計的方向 介面設計會影響開發工時 API FLOW 和某些程度的功能 如果初期沒把 UX 加進去 等規格書都訂了才輪到 UX 上場 會導致 UX 綁手綁腳失去一半以上的戰力 在前期加入 UX 能讓產品更符合客戶所需 也能大幅減少後期開發成本 如果依照目前台灣習性 讓 PM 畫完 Wireframe 再交給 UX 最重要的工作都被 PM 做完了要 UX 幹什麼 還滿常遇到 PM 塞一份不知打哪來 我從沒看過的 Wireframe 說 幫忙順一下流程 挑挑錯誤 等到我挑出錯誤 並把 Wireframe 重繪過後才跟我說 這客戶都確認過 不能改了 那叫我看幹嘛啊 Posted by Akane Lee January 6 2014 Guideline UI ux 初學者 Tweet Comments Please enable JavaScript to

    Original URL path: http://blog.akanelee.me/posts/174505-three-kinds-of-application-style (2016-05-02)
    Open archived version from archive

  • 我的推薦書單 « 嫁給RD的 UI Designer
    就算作者努力用有趣的文筆寫作 依就不是很好啃 後半本有些內容觀念和前半本重疊 如果你負責的介面設計不只是 mobile 包含 Desktop App 的話 這本還是看一下吧 講很多關於有的沒的選單 表格 表單 文字提醒的規則 當成邁向進階介面設計師讀物很棒 裡面的易用性原則只要是介面設計都派得上用場 行動介面設計模式圖鑑 就是 Mobile App 設計的 Patten 大全 沒什麼好說的 身為 Mobile App 設計師 桌上不擺一本像話嗎 如果你是 PM 很不幸的 Wireframe 又都歸你畫 快去敗一本回來抄吧 這本可以讓你用旁門左道抄捷徑畫出不會害死 RD 的 Wireframe 行動介面設計模式 同樣也是必擺桌上的好書一本 沒有 GUI 設計禁忌 2 0 那麼硬 但也不怎麼好啃 行動介面設計模式圖鑑和行動介面設計模式這兩本可以當成 Guideline 看 先翻過一遍有點印象 之後用上某某元件 某某功能時記得來翻一下 確認什麼可以做 什麼不能做 是非常實用的工具書 新多益單字大全 不用問了 我的英文非常破爛 只有全民英檢初級 誰叫日本的 AVG 遊戲比較好玩 還有很讚的聲優全程語音 同一句台詞要聽幾次都可以 唯一能讓我抱著英文字典打電動的只有當年的FF7 打完一輪只記得 Attack CSS Web設計的關鍵法則 個人覺得這本不錯 寫法讓人很容易學會 我的 CSS 基礎是靠這本墊定的 不過還是被 RD 老公罵過後才寫得出乾淨漂亮的 Code 觸動人心 設計優秀的 iPhone 應用 這本有出繁中啦 只是簡中書比較便宜 上市時間又比較早 我懶得等都會先買簡中來看 搭配 iPhone User Experience 簡單法一起看很不錯 圖也很多 這兩本看完記得寫寫筆記 有模有樣去唬外行人不太會被看破手腳 互動設計概論 必看書籍之一 作者非常用心找了很多資料 不管你是 RD PM UI還是大老闆 想了解介面是什麼 互動又是什麼 一定要把此書放入購物清單中 這是目前我覺得從理論切入介面設計寫得最完整又最容易讓初學者理解的好書 可以釐清很多模糊的概念 對工作上會有很大的幫助 卡關想升等開竅就靠這一本了 麥克筆技法 Q版人物 這兩本 本來想練練漫畫技巧 也許有朝一日可以跟潮流畫畫 RD 老公掉漆日記 之類的四格 不過實在太忙了 閒下來的時間只想把腦袋放空 完全不想提筆 書是看完幾次也寫了筆記 但技術這回事我比較信 身體力行 多練習比光看書學得快 所以不知何年何月才有辦法生得出掉漆日記 筆記本 自動筆 書架最右邊有拍到筆記本 我就順便介紹一下 很喜歡無印良品的筆記本 Muji 什麼都貴就文具很便宜 A5 方眼筆記拿來寫筆記 畫 Wireframe 很好用 1 本 25 元很能接受的售價 如果想要專業一點的話 有出 A5 尺寸線圈的 點點 格筆記本 單本 NT 1xx 元 貴很多 不過 Dribbble 上很多設計師都是用點點格紙 想裝一下的話是可以買一本來放 要畫細線 和減輕包包重量 的關係 我都用自動鉛筆 這幾年愛用 Uni KURU TOGA 筆芯會自動旋轉 不管怎麼寫字筆芯都會是尖的 筆劃粗細差不多 0 3 和 0 5 這兩種尺寸我都有 國外某大師是用 0 3 的 以上都是我自己有買 有用過 有看完 甚至連筆記都寫了的書籍工具 很有說服力吧 XD 當然也是有很多很不錯的書籍我在圖書館借了所以做完筆記就還回去了沒買 很多很棒我很想看的書在 Amazon 上才買得到 還是英文 被戳到死穴 除了技術外 英文真是超乎想像的重要 Posted by Akane Lee January 2 2014 個人經驗

    Original URL path: http://blog.akanelee.me/posts/171722-my-reading-list (2016-05-02)
    Open archived version from archive



  •