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".
  • 活用 Google Map 規劃旅行 « 嫁給RD的 UI Designer
    在大幅修改前最好打聲招呼 省的像我一樣氣個半死 明明整份行程都是我排的 搞到自己看不懂是哪招 My Maps Editor 出國旅行總不方便隨身揹著電腦 這時候推薦 My Maps Editor 這款 App 是免費的唷 它可以直接同步 Google Map 我的地圖 還能定位 出國只要帶手機 買當地便宜上網用預付卡就可以不怕迷路放心自由行 雖說 UI 不是很順手 問題很多 常常無預警當機 看在免費 沒得挑了的份上將就點用吧 在電腦上編輯好再帶隨身版的地圖出門非常方便 不需要在小小的螢幕打字半天 我一直覺得在 iPhone 上打字是件很苦的事 而且查旅遊資料的時候通常會開大量的視窗 還是在電腦上編輯好旅遊地圖再同步到手機方便得多 Maps Engine 喔對 現在有新的 Google Map 可以把舊地圖匯入 多了畫線 圖層 表格式資料等等功能 不過我習慣左方列表能看到註解 改成這樣有點不順手 雖說有圖層 有表格功能 但還要再點擊一次才能看到所有文字 但這就沒辦法和圖示連在一起的 我習慣把飯店設張床 餐廳設刀叉 不同天的景點就用不同顏色的錨點區分 看來得花點時間重新適應了 Posted by Akane Lee March 7 2014 個人經驗 Tweet Comments Please enable JavaScript to

    Original URL path: http://blog.akanelee.me/posts/183856-using-their-google-map-plan (2016-05-02)
    Open archived version from archive

  • PS 色彩管理與解析度設定 « 嫁給RD的 UI Designer
    5S 顏色還正常 原本的 iPhone 4 卻偏黃 老公的 iPhone 5 有點藍 目前的校色器已能針對手機進行校色 個人覺得沒這個必要 就算在自己手機螢幕上看顏色非常精準 但在其他人的設備上看起來還是有誤差 當然有校過爽度比較高 看個人需求 延伸閱讀 你為什麼需要色彩管理 原理不解釋 請直接去看原文 嫌看英文太苦的話 這邊有對岸翻好的中文 UI設計中的色彩管理 顏色設定 選擇 編輯 顏色設置 在 RGB 選項中選擇 顯示器RGB Display 色彩管理策略 將RGB設定為 關 開新檔案 這邊有份關於 iOS 各螢幕尺寸解析度等等的小抄 Resolutions Display Specifications 可以看到 iPhone 5的螢幕尺寸是 640x1136px 326 ppi 別傻傻的就把 Photoshop 解析度設定 326 比例會跑掉 解析度設 72 ppi RGB 模式 不要對此文件進行色彩管理 無論是做 1x 還是 2x 檔 解析度請設定為 72 dpi 關於這點我和老公有實際測試過 直接開 Photoshop 和 Xcode 切不同解析度下產生的圖檔扔進 iPhone 裡會長什麼樣子 也測過各種不同解析度下對字級的影響 在 Photoshop 製圖時設定 72 才會在 iPhone 等設備上呈現 1 1 的尺寸 至於為什麼請參考這篇 像素 Pixel 與解析度 dpi dpi 計算 dpi pixel dpi ppi dpi 像素 dpi calculator 輸出jpg png 檔 只要不是給印刷用的圖檔 也不是丟進 Slicy 切圖 我都會採 儲存成網頁用 的存檔方式 這種存檔方式可以針對需要的檔案格式進行輸出微調 輸出時請確保 轉換為sRGB 被關閉 關於 png 8 png 24 和 jpeg 的不同請參考 選擇適當的網頁圖片格式 結論 不管是 iOS 也好 Android 也好 Photoshop 製圖時解析度一律設72 禁用 Photoshop 進行色彩管理可強制將螢幕上的實際色值保存到文件中 以上是和切圖有關的設定 如果你的工作範圍包含修照片 印刷等等 就會需要進行色彩管理 請依工作內容調整不同的設定 Posted by Akane Lee February 22 2014 photoshop color tutorials UI Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 8px 後續 模糊 活用 Google Map 規劃旅行 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog

    Original URL path: http://blog.akanelee.me/posts/180564-for-ui-ps-setup (2016-05-02)
    Open archived version from archive

  • 8px 後續,模糊 « 嫁給RD的 UI Designer
    連很多 UI 都沒留意到這個問題了 即使是用向量製圖還是會糊的 舉個例子 可以看到左邊那個矩型好像有長毛邊 右邊那個邊緣銳利 左右兩個矩形其實是同一個 只差在有沒有對齊像素格線而已 要保持向量圖的銳利邊緣 可以這樣設定 Photoshop 偏好設定 介面 只要是形狀圖層 記得一定要把對齊邊緣勾起來 就算是從 illustrator 貼過來的也要勾 會明顯看到邊緣變乾淨了 這種糊在畫大圖的時候不怎麼明顯 一切圖下去就容易在小尺寸的 icon 上出現問題 所以做小圖放大最安全 但做大圖再縮小畫面精緻 看要怎麼取捨了 Web 上要用 8px 進行設計的條件 8px 的文章很多人問我為什麼不是 Web 8px 設計法是為了解決 圖片會糊 的問題 基於 web 8px 這兩點為前提做出說明 如果在 640px 螢幕上變動寬度的方式放上 4px 的圖 他需要佔畫面寬的 0 625 所以在 240px 螢幕的情況下該圖片的寬度就會變成是 1 5px 但 1 5px 不存在 所以表現出來一定是 1px 或 2px 造成模糊 這就是 8px 設計想要避免的狀況 但在 8px 設計法在 reponsive design 實務上會遇到困難 在 web 上的圖片有兩種型式 固定呎吋和變動呎吋 固定呎吋就不用提了 螢幕呎吋再怎麼變他就是這麼大 但變動呎吋是跟著父元素的大小變化 如果說這其中參雜著固定呎吋的設定就會產生問題 舉例來說 在 640px 的 HTML 裡放一個 div padding 設左右 8px 裡面再放一個 div 並在此 div 內放上一張寬 100 的圖片 所以該圖片在 640px 下的寬度會是 624px 但在 HTML 寬度變成 240px 的情況下時就會變成 224px 從 8px 設計的概念來看 624px 是 8px 640px 的基數 的倍數沒錯 但 224px 並不是 3px 240px 的基數 的倍數 這就違反了該設計的原則了 簡單說 在 responsive web 上要用 8px 為單位做圖不是不行 但條件是所有的 margin border padding width height 全都得用 去設 而且 也得算的剛好 不然也會破功 此部份感謝老公說明 8px 用在 Web 設計上 何苦呢 App iOS 注意雙數問題 注意像素對齊 基本上不太會糊 Android 比較麻煩 切圖前請向你家 RD 詢問如何切圖及標示文件怎麼標 做9 patch的話 底圖和文字是不是要分開切 圖片是要用固定 px 還是算等份之類通通問清楚做筆記 注意因應螢幕尺寸產出的各種切圖清晰度 或乾脆產出 3 套不同尺寸的 psd 檔 各別調整後再切圖 Posted by Akane Lee February 21 2014 UI Web iOS android Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 關於

    Original URL path: http://blog.akanelee.me/posts/179699-blur-kinds (2016-05-02)
    Open archived version from archive

  • 關於 8px « 嫁給RD的 UI Designer
    尺寸也許和其他人慣用的不太一樣 但無影響 Android 螢幕尺寸本來就很多種 所以才需要 9 patch 來輔助 mdpi 160dpi 1x 480x320 hdpi 240dpi 1 5x 800x480 xhdpi 320dpi 2x 1280x720 xxhdpi 480dpi 3x 1920x1080 Android 螢幕尺寸 此部份感謝友人 Takeru 說明 為了適應android百花齊放的螢幕解析度與螢幕尺寸 都是以dpi Dot peer inch 為基準 在Guideline的定義中 http blog csdn net moruite article details 6028547 這邊有dpi的計算方法 dpi會受到螢幕尺寸實際大小的影響 即使同樣解析度在不同的螢幕尺寸中 會得到不同dpi 已有網站整理目前各機種的螢幕解析度和dpi http screensiz es phone 所以當dpi在480 320之間時 系統會以xxhdpi的圖檔為第一優先 至於1920x1080則是目前最常見的解析度 之後 320 240之間 則是以xhdpi的圖檔為優先 以此類推 同樣的 在xhdpi中1280x720是最常見的解析度 所以 最初列表中的解析度為常見的解析度 並非絕對 圖檔資料夾雖是以dpi作為區隔 都是以一個範圍 非單一值 大部份都是以此為標準 當然也有例外 例如 note2 圖片放大縮小 為了 iOS 和 Android 總共只出一套psd 不能使用 9 patch 延伸的圖片部分 在 1x 情況下都要以 4px 為單位設計 做 2x 圖時是以 8px 當單位 所有圖片能用向量製作就用向量 設定 4px 是 為了避免因比例換算產生 0 X px 導致圖片模糊失真 px 一定是整數 沒有小數點 而不是最後的切圖產出 切圖一樣要針對不同解析度切幾套出來 別以為用 4px 當單位 整個 psd 檔放大 2 倍 像素 icon 圖就不會糊掉了 切圖和標示文件不可能共用 光切圖方式就不一樣了是要怎麼用同一份標示文件 Android 有個獨有的切圖方式稱 9 patch 可以讓切圖自動延展 iOS 同樣也有延展設計 但標示方式和 Android 不同 我另外開文寫這部分 有的 iOS RD 會要求使用座標來製作標示文件 但 Android RD 沒辦法使用座標 即使是相同的設計也無法使用同一套切圖 舉個例子 就以按鈕來講 iOS 可以把文字直接和底圖上切成一張圖 不管是 iPhone 5s 或 iPhone 4 上文字邊緣依然銳利 但若希望 Android 每台手機都能看到銳利的文字 底圖和文字就要分開 給 RD 的切圖就是標了 9 patch 的純底圖一張 文字必需由系統產生才能保持絕對清晰 在無法使用內建文字的情況下 Android 底圖和文字要分開切 不能使用 9 patch 9 patch 只能延伸底圖 如果延伸很長的話 會變成底圖很大字還是很小的情況 結論 為了 RD 好 還是把 iOS 和 Android 分開看待 直接拿 iOS 的切圖和標示文件給 Android 的 RD 就等著被退貨吧 iOS 和 Android 分別設計介面 做 1x 再放大給其他尺寸使用最安全 做大縮小的情況下所有數值一定要設成雙數 研究一下如何放大縮小圖片無損吧

    Original URL path: http://blog.akanelee.me/posts/179289-about-8px (2016-05-02)
    Open archived version from archive

  • 學習UI/UX的四大重點 « 嫁給RD的 UI Designer
    閱讀大量文件不再是有背就有分 要懂得活用 學著如何將理論變成可實際使用的方式絕對比大量閱讀難度更高 舉個例子 色彩心理學是 UI 設計師的必修課 大家都知道紅色代表熱情 白色給人純潔的印象 但真正要著手設計網頁時就會愣住了 大標題 小標題 內文 底色 側邊欄 選單 表單 等等都需要搭配色彩 總不能整個網頁通通用紅色 過年賣春聯紅包啊 如何把理論轉成可實踐的方式絕對是個難題 技術 這邊的技術指的是如何把 實踐 具現化 讓一般大眾都能明白你想傳達什麼 比如軟體操作 Xmind 適合製作 Functional Map UI Flow Balsamiq Axure 能快速畫出 Wireframe Photoshop Sketch 可以幫助完成精緻的稿件 Mark Man 能讓 UI 和 RD 對最終產出有共識 等等 沒有什麼工具是好或壞 只有適不適合自己 高手給他小畫家都能生出蒙納麗莎 但有更好用方便的工具時為什麼要選擇小畫家硬上 素描水彩也是 UI 設計師的必修課 訓練觀察和表達的能力 不過手繪大約是到了一定階段遇到瓶頸 需要更進一步再去加強的能力 通常是卡在就連奇技淫巧偷吃步也沒辦法無法明確將內心所想的表達出來 眼高手低 時 BUT 英文比手繪能力重要 它是第一階段 理論 的基礎 遮臉 品味 技術可以靠練習磨練 品味這件事就跟內力一樣 只能靠時間去累積 有個快速的方法 建立一個圖庫 逼自己每天抓 喜歡的 很炫 期許自己也畫得出來 的 20 張圖 依圖片性質分類 ex Desktop icon Mobile Web iphone list 等等 每半年就整個圖庫大翻新 尋找 分類的過程中就會慢慢提升品味 這完全急不來 就和研究穿衣打扮一樣 不多看雜誌或穿搭教學 也沒辦法有 潮 感 結論 以上是主要 4 大方向 接下來就是針對某讀者的問題回答了 如果之後想進入相關業界 這一年期間我該怎麼準備呢 作品集方面要怎麼下手 有甚麼資料我要開始著手準備呢 我個人是實戰派的 能循序漸進墊基礎當然最好 但非本科生白天又需要上班的情況下 基於台灣大環境的考量 技術 會是你第一優先需要提升的 如果你有一年的時間 那就全部投在 Photoshop 上 買一支 iPhone 或 Android 逼自己一天至少下載 3 個介面漂亮的 app 玩玩看 想想為什麼會覺得這個 app 很炫或是很好用 練品味和培養操作慣性 作品集部份 Dribbble 上高手非常多 找喜歡的作品從 0 開始用自己的方式 臨摹 自己找圖找素材想文案 或是 app store 每週更新的漂亮 Banner 也可以 一週畫一個 一年就 52 個了非常豐富 PSD 上有很多教學 挑有興趣的跟著做 不只學到新思路和技巧 而且又多一件作品了 作品集上記得註明臨摹或仿作 分配上大約就是 10 理論 10 實踐 70 技術 10 品味 基本設計業界都是看作品集 作品集一翻實力立見真章 這種方式只能應急 只能幫你找到個 是UI 的工作 之後該看的文件該墊的理論基礎還是要想辦法補回來 不然開始工作後會很辛苦 Posted by Akane Lee February 18 2014 初學者 UI ux Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus Adobe Muse CC

    Original URL path: http://blog.akanelee.me/posts/179093-ui-ux-four-key (2016-05-02)
    Open archived version from archive

  • Adobe Muse CC 心得 « 嫁給RD的 UI Designer
    Prototype Keynote photoshop HTML CSS Sublime Prototype 第一要件就是 會動 就算是 Wireframe 只要有互動性就可以稱做 Prototype 線框稿 不能操作 靜態 Wireframe 線框稿 可以操作 會動 Prototype 漂亮的畫面 不能操作 靜態 Mockup 漂亮的畫面 可以操作 會動 Prototype 1 Muse 做出來的 Prototype 無法直接當成最後產出 客戶如果要求修改就得修改兩份檔案 Muse 改完後 得回過頭去改 PSD 檔 而且最終還是得回到 PSD 上切圖 手寫產出 HTML 那為什麼要多花一份工 直接用 photoshop 產生切片設 Link 能更快產出 Prototype 如果是為了樹狀圖功能 可以把做好的 Mockup 扔回 UI Flow 就有圖片版的 Flow 了 2 完成 Wireframe 後跳過 Photoshop 直接用 Muse 產出 測了一下 Muse 沒辦法直接吃 PSD 檔轉成 HTML 在避免重工的情況下如果放棄使用 photoshop 之類的軟體製作 Mockup Wireframe 畫完就開 Muse 直接取代 Photoshop 製作稿件 直接產出 HTML 但這就不是 Prototype 了啊 3 Muse 修改容易 如果沒有版本控管 多方人士可以隨意自行修改檔案的話會產生非常恐怖的後果 抱頭 4 Muse 不支援 Retina 非常誇張的鋸齒邊緣 MBPR 上連開啟舊檔視窗和所有文字都是糊的 5 不能拿 Muse 產出的檔案給工程師 不管是 PS 還是 Muse 最後產出的檔案 拿給 F2E 只會讓他們吐血 可以隨便打開官方推薦用 Muse 產出的網站 右鍵 檢視網頁原始碼感受一下 http muse adobe com site of the day 難怪要強調 Muse 可以操作 SEO 結論 如果是不會寫 Code 的 網頁設計師 視覺設計師 做的網站又不需要和工程師合作 Muse 這套軟體可以納入考慮使用的範圍 不過 Dreamweaver 彈性還是比較大 好吧我實在搞不懂這套軟體夾在 Edge Reflow Edge Animate Dreamweaver 中間主要是為了什麼 感覺上就是個和 80 級時代的神聖新星差不多的東西 打不痛怪補血又杯水車薪的 AE 技 帶新手刷監獄用洗 EXP 專用 Posted by Akane Lee February 17 2014 個人經驗 Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus QRCode 神器 iQR codes 學習UI UX的四大重點 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群

    Original URL path: http://blog.akanelee.me/posts/179020-adobe-muse-cc (2016-05-02)
    Open archived version from archive

  • QRCode 神器:iQR codes « 嫁給RD的 UI Designer
    l zh mt 12 內建很多種不同的格式 不管是電話號碼 網址都可以自動生成相對應的 QRcode 右上角 Customize 能自訂樣式 從圓角 方角 顏色 漸層 內陰影 外陰影都可以自訂 滑鼠在介面上點一點就能夠做出各式各樣的色彩 樣式 就連那3顆硬梆梆死板板的定位標記都能變得很活潑特別 按下工具列最左邊的 Save 選好檔名格式尺寸後 QRCode就做好了 把 LOGO 圖拖進下方的欄位 App 會自動調整LOGO尺寸置中擺放 心得 你知道在沒有這種神兵利器下 視覺設計師要怎麼生成一個漂亮的 QRCode 手動對位一格格刻啊大哥 刻一個很花時間的 iQR codes QR Code Art Studio 能省下很多時間力氣 當然還是有其限制存在 比如樣式就只能選擇內建的那幾種頂多調調顏色 改改陰影角度這樣 但應付一般客戶要求 我要一個明顯活潑有特色的QRCode 綽綽有餘了 Posted by Akane Lee February 10 2014 Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by

    Original URL path: http://blog.akanelee.me/posts/178424-to-quickly-make-qrcode (2016-05-02)
    Open archived version from archive

  • 關於使用者經驗測試 « 嫁給RD的 UI Designer
    使用者測試 就算真的會執行好了 測完了 然後呢 就算拿到測試結果 真的知道要怎麼修正錯誤嗎 削價競爭的公司開出來的薪資待遇通常也不高 只有工作壓力和流動率高 UI UX 光畫圖就來不及了 誰還有力氣去研究該怎麼依照測試結果修改 Prototype 畫好 Wireframe 就做成 Prototype 測試順不順手可以在開發初期修正錯誤 但這招只對開發者有效 一般人哪看得懂線框稿啊 都要視覺化做成 Mockup 等級後他們才知道怎麼操作 可是一般人才是真正的使用者啊 這表示 Wireframe 式的 Prototype 沒辦法當成使用者經驗測試 拿來當成內部順 Flow 的方式倒是可以 開發者也是使用者啊 開發者對自己的作品瞭若指掌 立場和觀點都偏離使用者太遠 測出來的結果太偏頗不客觀 嘛 雖說開發時程都很趕 偶爾我也是會做 Prototype 測試的 不過測試對象通常是老媽而已 如果連拿智障型手機的老媽都會操作了 拿智慧型手機的年輕人沒道理看不懂介面 通常我會把 PSD 檔輸出成 PNG 扔進 Keynote 設定動作 輸出成 PDF 後傳到手機上拿給老媽用看看 Keynote 做簡報很簡單大家都會 入門門檻低 還有一大堆過場特效可以設定免煩惱 能簡單方便快速成型最重要 別把使用者經驗測試想得太難了 我不喜歡把 UX 講得很玄妙像是要齋戒沐浴後焚香膜拜聆聽神喻一樣 替使用者著想 就是 UX 的中心思想 在 UI UX 這個詞還沒發明出來的時候難道就沒有人在做 UX 了嗎 圖片出處 http en wikipedia org wiki File The Apple Mouse jpg 以 MAC 滑鼠為例 我從右2那顆像溜溜球的滑鼠開始接觸 MAC 除了難用到爆握久會手痛抽筋之外不知道該怎麼形容 完全不合人體工學 溜溜球被罵翻後 Apple 就把滑鼠造型改回長型的了 這就是 UX 啊 我這個使用者體驗到溜溜球非常難用 所以 Apple 根據使用者經驗 很難用 不合人體工學 的結果修改產品設計 現在的 Magic Mouse 又漂亮又好用 圖片出處 http www apple com tw magicmouse 最簡單的使用者經驗測試 做個 Prototype 交給受測者 出個操作任務請受測者完成 ex 申請帳號完成第一次打卡 拍張照片套濾鏡上傳 Twitter 在受測者操作時把自己當空氣 什麼話都不跟受測者說 全程紀錄他的操作方式 找出受測者操作錯誤 停頓的部份 測試結束後聽受測者的抱怨 受測者操作錯誤 停頓的部份就是介面設計不良 需要修正的部份 他們的抱怨也是修改依據之一 找出為什麼受測者無法完成任務的原因和卡住的問題並解決 就是使用者經驗測試的目的 哭笑不得的使用者回應 N年前考研究所的時候要展示作品集 偏偏我之前的工作都在處理公家機關後台系統介面 即使沒簽保密條約 我也不覺得那是可以拿出來公開展示的東西 所以作品集裡只放了 22 間公家機關的 LOGO 再加上平面設計海報和網頁設計截圖 就印了10本以備不時之需 面試時果然被問了 妳不是做介面設計的 為什麼妳的作品集裡面都沒有相關作品 我 後台系統我想不太能公開展示 可是你們一定都用過 所以我沒放 你們差勤系統的介面是我做的 面試官 把手上的作品集往桌上一摔 妳不提就算了 你們家的系統真是有夠難用的 我 微笑 是啊 所以我已經離職換工作了 像這類套裝產品的介面也不是 UI 喊改就能改的 背後牽涉到太多開發人員 這時候也就只能微笑了 大概是因為這段插曲讓教授們對我印象深刻 最低錄取分數就是我的分數 就算是最後一名也還是正取啦 哇哈哈 真不知道該為自己做過有口皆呸的難用介面感到丟臉 還是高興就是因為它難用到讓教授對我印象深刻所以我才有研究所可以念 Posted by Akane Lee January 28 2014 ux Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 愛用切圖神器 Slicy

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



  •