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".
  • 色盲者使用的配色檢測法 « 嫁給RD的 UI Designer
    對比度 增強 紅底藍字也許在普通人眼中還能閱讀 但藍底紅字就糊掉了 下方有在各類色盲者眼裡看到這種配色的模擬狀態 一整個慘不忍睹 Normal Vision 正常視力 Protanopia 紅色色盲 Deuteranopia 綠色色盲 Tritanopia 藍色色盲 Color Blindness 全色盲 如果是 FFFFFF 白色和 003FFF 藍色來比較 可以看到在 AAA 等級的小字體時仍不夠清晰 這是舊版的 WCAG 1 0 檢測 參考用 現在通用的規範是 2 0 唷 BTW 如果是智慧型手機遊戲之類 想放生某些族群我能理解 但如果是大眾通用的平台比如 ATM 指示路牌 公益網站 政府單位等等 我就會變得很嚴格 也許目前技術上沒辦法顧及所有的族群 但在能力範圍內能做多少努力就是多少 這年頭想要對得起自己的良心都是個很大的考驗 3 1 社會責任 每個人均有責任一視同仁對待健全人士和殘疾人士 這一點對網站來說尤為重要 因為網站往往可以協助殘疾人士在知識型社會中更獨立地生活 讓他們充分發揮潛能 在某些情況下 網站是殘疾人士接觸最新資訊的唯一途徑 誤解1 殘疾人士不使用網站 許多人認為殘疾人士不使用網站 事實上 情況完全相反 很多殘疾人士和健全人士一樣經常使用網站 在網上購物和進行社交活動 令他們更能獨立地生活 取自 政府資訊科技總監辦公室 無障礙網頁手冊 Posted by

    Original URL path: http://blog.akanelee.me/posts/193147-colorblind-color-scheme (2016-05-02)
    Open archived version from archive

  • Tag : color « 嫁給RD的 UI Designer
    UI 的角度來談談給 UI 用的 Photoshop 螢幕設定吧 就 色彩管理 和 解析度 的部份 本文參考 Colour management and UI design 和 Designing for Retina display part two 所寫 Read on 色盲者使用的配色檢測法 April 10 2014 Comments Contrast A Find Accessible Color Combinations 是個很不錯的配色網站 我主要是用它測試在色盲者眼中的顏色會是什麼樣子 是否通過 WCAG 2 0 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品

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

  • iOS Guideline 怎麼看?(1) « 嫁給RD的 UI Designer
    請直接點中間的 iOS Human Interface Guidelines 這是本文要講的重點 如果你是新手上路更一定要把這指南看熟 UI Design Basics UI Design Basics 這個單元講了許多 概念 像是 iOS 主要風格 版面配置方式等等 可以看做 導論 或是 序 也就是各方面都提到一點點 要怎麼實作不告訴你這樣 我把我覺得最重要一定要看的部份撈出來講 請配合官方文件閱讀 最基本一定要知道的 UI 元件名稱 幹 UI 連這個都不曉得可以洗洗睡了 之後的文件也不用看 專業術語和名詞部份請記英文 很多用詞講中文反而容易混淆 Navigation bar 導覽列 會放上一頁 編輯 新增 完成按鈕 還會放LOGO的地方 Tab bar 一定在最下方的標籤列 最多只能放 5 個 icon 超過 5 個選項系統內建會把第 5 個icon變成 Segmented control 分段控制 通常拿來切換列表 Toolbar 常見於列表或瀏覽器 可對 View 進行操作 Map view 地圖視圖 尺寸設定自由 Alert 警告視窗 只能放字不能放圖 Modal view 由下而上浮出的視窗 通常在使用者中途想插入額外操作或瀏覽更多訊息時使用 在iPhone上為滿版 ipad有固定尺寸 Share screen 內建的分享列表 iOS7 才長這樣 官方特別指明的 不要這樣搞 Tool bar Tab bar 都一樣 請不要塞滿它 1x時 最小手指觸控範圍是 44px 盡量不要比這個尺寸更小 官方文件單位為pt 注意 1x 2x 3x 在製圖時情況和 Guideline 不同 台灣客戶最愛 字體只有一種太單調 就不能活潑雀躍一點嗎 內建繁體中文字體只有 1 種 黑體繁 中黑還是細自己選吧 沒了 除非客戶逼你把所有字都改用圖去處理 不然可以兩手一攤對他說辦不到 台灣客戶最愛 畫面太空了塞滿它 無解 燒香拜佛自求多福吧 BTW UI Design Basics 這部份很多都和我之前寫過的這些文章 UI 雜談 有點關聯 不過新手上路應該有看沒有懂 最簡單的方式就是 每天守著 App Store 排行榜 除了遊戲類之外 把所有免費榜上 icon 看起來還不錯的 App 全部抓下來玩玩 一天至少10個 很多時候做設計靠的是經驗和反射動作 不分好壞海量接觸各種 App 會強迫提升 EXP 摸久了幾乎打開 App 的 30 秒內就知道這 App 哪裡有問題 請不要把遊戲類的免費榜從頭抓到尾 遊戲類 App 不在 Guideline 限制範圍內 一個月之後你就會發現一個 App 抓下來打開 摸個 20 秒就會跳出刪掉嘀咕一句這三小 恭喜你 你成長了 Posted by Akane Lee April 8 2014 Guideline 初學者 UI ux Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 初學者的 Mockup 色盲者使用的配色檢測法 Akane Lee Recent Posts UI

    Original URL path: http://blog.akanelee.me/posts/192859-how-to-read-guidelineios-1 (2016-05-02)
    Open archived version from archive

  • 初學者的 Mockup « 嫁給RD的 UI Designer
    Mockup AI 是印刷用的設計軟體 例子 舉個例子 亂撇版的 Wireframe 長這樣 有 Navigation Bar 大圖 大標語 幾個功能欄 很多字的Footer 這是我亂撇的 千萬不要拿這種水準的塗鴉給主管或客戶看 把亂撇的 Wireframe 乖乖用Axure 或 Balsamiq 畫精緻一點 之後你的 Mockup 就有可能會長成這樣 這次用的 Mockup 是 PS 外掛產生的 用不到 3 分鐘就做好了 WebZap Photoshop panel plugin for web developers 神器推薦 圖是假圖 字也是假字 圖片和文字的來源有可能是接程式資料庫 也有可能還要跟客戶 企劃追討 但最後上線的網站長相就應該是這個樣子 很多客戶對 Wireframe 一點意見都沒有 看到 Mockup 完成後什麼保家救國愛地球之類的意見都會出爐 他們看不懂 Wireframe 直到視覺設計他們才會 稍微 知道畫面會是什麼樣子 有些甚至要做成 Prototype 才有辦法理解畫面的動線和操作 這類客戶通常在談合作 準備要簽約的時候把設計師捧上天 等到視覺稿出來就把設計師當名片 600 含印刷的美工踐踏 Navigation Bar 網頁的 Navigation Bar 一定會有 LOGO和選單文字 有些網站為了突顯區塊會加上底色或底圖 形象傳遞 這個區塊是使用者進入網站目光最先停留的位置 通常會放張大圖營造網站氛圍 可能放置滿版大圖 大字標語 動畫 左右滑動特效 廣告等等 細部說明 像是某個 APP 有什麼樣的功能 網站能提供什麼樣的資訊或服務等等 更細節的介紹會放在大圖的下方 再更深入的內容會用 Link 的方式將使用者引導至內頁 Footer 不管中間大圖 說明介紹區塊版面多長 Footer 一定在網站最底下 並寫明版權宣告 開發者訊息 像這個網站的 Footer 寫的就是 Copyright 2013 Akane Powered by Logdown and Octopress 當網站架構較龐大 有可能會在 Footer 增加網站地圖之類的快速連結 也有的網站放置更多作者介紹 Mockup 之後的階段可能接 Prototype 或是直接切圖輸出 Mockup 和 Prototype 最大的差別就是一個會動 一個不能動 只要是會動的 無論是 Wireframe 或是 Mockup 等等都可稱之為 Prototype 不會動的視覺稿就是 Mockup 雖然翻譯上都可能稱之為 原型 但實際上是不同的兩件事 關於 Mockup 的製作技巧有個很棒的教學網站可以自修 Interface Tuts Design Illustration Category 製作 Mockup 有很多需要注意的魔鬼 細節 Web iOS Android 等等都不一樣 有興趣想先知道哪個部份的可以留言或寫信提醒我一下 不然一句以後有機會再來寫篇文 八成遇坑不補 Posted by Akane Lee March 29 2014 Mockup 初學者 UI Web Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 標示色碼的方法 iOS Guideline 怎麼看 1 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4

    Original URL path: http://blog.akanelee.me/posts/190997-a-beginners-mockup (2016-05-02)
    Open archived version from archive

  • 標示色碼的方法 « 嫁給RD的 UI Designer
    Alpha 這個值 它代表不透明度 Alpha 可用 0 或 0 0 完全透明 到 100 或 1 0 完全不透明 的值來表示 當數字越高表示透明度越低 關於網頁使用的色碼同樣參考 CSS Legal Color Values 這篇文 Android Android 使用的色碼為 Alpha HEX 前兩位數字是 Alpha 值 後 6 位數字是 HEX 色碼 如 CC000000 為 80 黑色 99ff0000 為 60 紅色 Alpha 數值換算 16進位 可參考下表 100 FF 95 F2 90 E6 85 D9 80 CC 75 BF 70 B3 65 A6 60 99 55 8C 50 80 45 73 40 66 35 59 30 4D 25 40 20 33 15 26 10 1A 5 0D 0 00 iOS iOS 使用 RGBA 如 UIColor colorWithRed 0 000 green 0 000 blue 0 000 alpha 1 000 為 100 黑色 順便一提 MAC OSX 的標示方式和 iOS 略有不同 寫法會是 NSColor colorWithCalibratedRed 0 000 green 0 000 blue 0 000 alpha 1 000 iDeveloper Color Code Converter 這款換算色碼的 App 是我的愛用品 推薦使用 很方便 我自己通常都使用 HEX Alpha 的標示方式 由 RD 自行換算 寫標示文件前還是先問過負責製作的那位 RD 看他希望你提供什麼樣的色碼 老話一句 依公司規定 注意事項 從圖中可以看到紅色色塊設定 30 的不透明度 要給 RD 的Alpha 值 就是 30 視情況換算成HEX或小數點 這對各位來講沒有難度 要注意的是 圖層混合模式 也就是不透明度左邊寫著 正常 這兩個字的下拉選單 如果這個圖層或群組切圖後需要讓 RD 設定 Alpha 值 該圖層的圖層混合模式絕對不可以是什麼 柔光 色彩增值 等等 只能夠是 正常 群組預設為穿透 圖層混合模式設定下去即使不透明度是 100 仍然會有透明效果 這是 Photoshop 對於影像的演算法 但無論是 Android iOS Web 瀏覽器 都沒有內建這類型的影像演算 Alpha 值設 100 就是實打實的完全不透明 沒有任何特殊效果

    Original URL path: http://blog.akanelee.me/posts/190198-color-code-with-alpha-value (2016-05-02)
    Open archived version from archive

  • 用 iPad 畫 Wireframe « 嫁給RD的 UI Designer
    很醜 雖然可以利用圖層解決這個問題 當目標是 快速記錄靈感 的時候顯得多此一舉 加上紙沒有筆記本橫條 操作有點複雜等等 並不推薦用它來畫 Wireframe 它的長處在向量製圖和對 ai ps 的支援度 App Store Adobe Ideas Vector drawing and illustration Paper 繪畫 App 1 個人非常不推薦使用這套畫 Wireframe 在免費的情況下僅沾水筆尖可使用 同一筆畫有粗有細 會讓 Wireframe 份量感變沉重 有粗細變化的線條太過搶眼 這適合用於情感的傳達 不適合用在版面配置上 即使付費購買其它筆尖 Paper 任何筆尖都只有一個尺寸 Bamboo Paper 任何筆尖都有 3 種不同粗細 最粗的筆畫邊框 中等筆尖寫標題 最細的筆寫內文正好 沒有得選的時候就覺得好像少了些什麼 同時 Paper 的放大功能無法讓人畫出長條直線 也無法自行控制放大倍率 這在繪製 Wireframe 上造成很大的困擾 App Store Paper Bamboo Paper Notebook 只是畫 Wireframe 太複雜的功能反而會使介面凌亂 占版面不利操作 我不需要也用不到 看重的部份在於筆觸滑順與下筆靈敏度 Bamboo Paper Notebook 是我這 2 年來用過筆劃延遲時間最短 最貼近真實使用情境的 App 寫字的筆畫也是我覺得最漂亮利落的 這個 App 剛出我就裝了 一路用到現在 途中試著換工具想找看看有沒有更順手的 轉了一圈又回到它的懷抱 App Store Bamboo Paper Notebook 個人使用習慣 我的 Wireframe 修改量非常大 為了確定各個元素都有被考量到 盡可能解決所有問題 隨便一個頁面起碼也會被我重畫個 3 到 5 次 在還沒買 iPad 之前 紙本常常被我擦到起毛 為了一個小元件的修改卻得重畫整個畫面浪費時間 買了 iPad 又裝了 Bamboo Paper Notebook 後工作效率好很多 花在擦鉛筆線和整張重畫上的時間變少了 出現靈感的時候分秒必爭啊 線條直不直根本不重要 能不能快速把想法記錄下來才是重點 畫一張這種 Wireframe 用不到 3 分鐘 畫面其實都用同個顏色比較正式 不過這本來就是只給自己看的 Wireframe 我會用不同顏色標出區塊和圖片 這樣子塗鴉上色也不用 3 分鐘 加上文字說明 在捷運上用 Bamboo Paper 亂撇很好用 iPad 很硬不會像紙本一樣軟軟的 就算因為晃動撇歪了還有復原可用 這是記錄靈感用的 不是正式要交出去的 Wireframe 延伸閱讀 為什麼要畫3次 Wireframe 什麼是 Wireframe 其它 我用 Paper 和 Bamboo Paper Notebook 分別畫了類似的版型 沒付費買 Paper 的筆尖就只有沾水筆 視覺都被很粗的線條搶去 注意力無法集中在版面配置上 慢慢畫線條粗細會比較接近 文思泉湧的時候要我慢慢畫好痛苦啊 在繪畫上細線會被用在亮處 粗線會是陰影處 我不希望 Wireframe 給人有光影變畫的感覺 做設計又不是在畫素描 以前還會自己弄張 iPad 或 iPhone 的空白圖匯進 App 裡規劃 後來發現這太慢了速度不夠快 又增加誤觸的機會 就放棄不用 最後 這是我愛用的觸控筆 wacom bamboo stylus 前端橡皮頭已經畫破 3 顆了 台灣要買這玩意挺貴又麻煩 一怒之下在淘寶訂了 7 顆 含運 NT 278元 台灣的半價 淘寶筆尖的橡皮料比原廠硬一點 不過我習慣用硬一點的筆寫字畫圖 還塞了衛生紙進去讓筆尖更硬些 寫起來觸感很好 和同學借用過 Adonit Jot 的觸控筆試寫 在我的 iPad 上製造幾條刮傷後立刻打入拒絕往來戶 Posted

    Original URL path: http://blog.akanelee.me/posts/189570-ipad-wireframe (2016-05-02)
    Open archived version from archive

  • 問「為什麼」來分析、設計介面 « 嫁給RD的 UI Designer
    能稍微理解一點對方的思考方式 反套回到自己的開發過程 邊問自己為什麼邊設計 為什麼要額外設計一個區塊放快速選單 為了讓使用者方便使用吧 半對半錯 讓使用者方便使用的立意是對的 但真的有需要這個功能嗎 或是真有需要用這種方式才能方便使用者快速找到他想要的資訊 為什麼要把快速選單放在右上角 因為大家都放在右上角啊 錯誤答案 不能回答因為大家都怎樣做就這樣設計 起碼也要說是因為 aaa 和 bbb 的限制 加上使用者較習慣 ccc 所以將它放在右上角 為什麼一定要做教學說明頁啊 使用者只有更笨沒有最笨 理論上這是正解 但實際上不能這樣回答 要說是 可以降低客訴機率 或是 讓使用者更清楚操作 為什麼要有這個功能 客戶要的 無解 無法用常理推斷也無法自問自答的死結 請拼命勸說開導客戶或是做個伸展操後認命工作 不停的問為什麼會強迫自己面對現實 現實就是有一大堆問題等著你解決 還可以模擬成品交出去後被他人質詢的回答 在腦海裡早模擬過千百遍不怕被問 還可以連珠砲式地把問題起因 遇到的限制 解法通通扔到對方頭上 發問者怎麼可能會比原設計者更熟悉這個介面 往往聽到這一大串回答就會沒事過關了 喂 如果剛好被問到沒注意到的問題那很棒 表示自己有遺漏的部份有人幫你補上 下次設計時就會少一個問題 這就是成長啊 Posted by Akane Lee March 13 2014 初學者 ux 個人經驗 Tweet Comments Please enable JavaScript to view the comments powered by Disqus

    Original URL path: http://blog.akanelee.me/posts/184878-asking-why (2016-05-02)
    Open archived version from archive

  • 高級美工 « 嫁給RD的 UI Designer
    看到美工二字就會衝出來跳哈林搖 思考一下 Art 和 Design 的不同 然後再看看這篇譯文 設計師 我們是否名符其實 原文 Designers you ll have to earn that title 你最終的成品製造了什麼樣的新問題 你的設計解決了什麼問題這是成為設計師最基本要問自己的內心OS 但開始動手了之後呢 舊的問題解決了卻製造了新的問題出來 在創造的過程中肯定會發生 解決了一個問題卻冒出另一個問題 的迴圈 如果你是 RD 一定對這現象非常有感觸 Code 都寫完測完了 靠北這 Bug 哪來的 設計師也同樣會有類似的情況 比如為了讓文字更有質感加上了陰影 卻忽略內文字太小加上陰影變得更模糊不易閱讀等等 為了解決自己製造的新問題得修改設計 解決了之後又製造新的問題 這就是創作過程 要闡述的設計理念就是這個部份 為什麼要這麼做 這麼做出現什麼樣的新問題 為了解決新問題所以採取什麼樣的應對策略 回到原文 Dribbble 目前架構對於 交流 這塊規劃仍然不足 就我自己使用上根本沒有發表設計理念的區塊 就像留言板一樣傳張圖 底下讓人回應 沒了 也難怪會被當成追求完美像素卻空洞的平台 換個角度想 反正也就看看漂亮的圖刺激一下靈感 本來就沒指望會在這些圖上看到什麼解決易用性的方案 易用性在台灣只是口號 擁有能迷惑客戶和老闆的視覺技術也就夠用了 攤手 話說 如果沒有那些人勾搭一幫整天膜拜的小朋友 相信踏入這個領域的人數和這些技術知識的普及率會更低 他們也是非常努力替圈子做出貢獻 80 的初學者和 20 的進階族群 當然是針對初學者的市場比較大 若把此當成獲利與生存方式的話 需要建立勢力圈也是無可厚非的事

    Original URL path: http://blog.akanelee.me/posts/184309-senior-arts (2016-05-02)
    Open archived version from archive