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".
  • Guideline 的重要性 « 嫁給RD的 UI Designer
    繼承上一點 如果非得要使用這個 App 操作不可 是否就得記住這個 App 特別 難用 的地方 大部份的情況下讓人有感的介面通常不會是個好介面 使用者在流暢操作下的介面往往一點感覺也沒有 等到卡住或不知怎麼使用時 介面易用性的問題就會冒出來 所以我一直覺得易用性跟保險套之間有很大的共通點 越無感越好 雖不至於一有狀況就是鬧出人命 但對介面有感通常常是易用性問題大條了的時候 確保團隊合作順利 扣掉校長兼掃地撞鐘那樣子的分工 一個專案最最少也會有 PM UI UX RD 三個人 表示一個專案會被切成三人份 各自有各自負責處理的專長範圍 必須討論溝通交流結合三人之力才能完成這份專案 只要是溝通就一定會有誤差 這個誤差就是成本 無論是時間或是人力 統一口徑是很重要的事 Guideline 能確保你們談論的是同一件事 PM 這裡可以加一下點點點嗎 UI 什麼點點點 更多的那個點點點 PM 就是會放在圖片下面那個點點點 RD 拜託那個是 Page Control 好不好 每次聽到這種對話 我想到 PowerPoint 強而有力的一個小點兒 乾脆把 Page Control 叫 強而有力的三個小點兒 算了 RD 的時程通常是被壓縮得最慘 突發狀況和意外以及客戶亂加功能下最可憐的犧牲品 包含和搞不清楚狀況的 UI 合作都會成為他們內心的痛 RD 這三小 131x245 尺寸的 2x png 你出 1x 檔給我看看啊 圖片尺寸沒有 0 5px 的 退件重做 RD App Store 上架要用的 icon 最好有 112px 這種尺寸啦 退件重做 RD Navigation Bar 高度哪來 100px 退件重做 PM 大爺您別玩啦 時程來不及了 UI 是 RD 看我不順眼一直退我件啊 iOS RD 給這垃圾我是可以用喔 Android RD 你圖忘了點 9 patch 了 UI 9 patch 那是什麼 可以吃嗎 Android RD 把圖切好給我就好 剩下我自己處理 以上還是真人真事 一個專案結束換下一個 新 UI 補進來接手 繼續輪迴無限退件地獄 搞的 RD 人人自危 急著學 Photoshop 怎麼修圖 建立 Guideline 剛剛提到的都只是 跟隨 一份現有的 Guideline 公司若開發自有產品 就會需要自己的 Guideline 什麼色碼 尺寸 字體字級 間距 這都還可以算是 VI 的範圍 如果加上 策略 面的話 好吧先不提這麼抽象的 來講講為什麼要建立 Guideline 好了 它能確保不管是誰接手都能有相同的產出 而不至於換個人處理就換了個長相 也可以把它當成系統規格書 屬於文件的一種 條列式分章節 明確告訴你什麼可以做 什麼不能做 某種特定情況下該怎麼處理 書諸圖文要學習要教育總是比較省成本 上手快 不能老靠師徒純粹口耳相傳吧 萬一中途有人離職或出意外怎麼了 這門技藝不就失傳 你為什麼要這樣做 有什麼理由嗎 我不知道耶 就 前面的人這樣做啊 恭喜你又跳入一個坑裡 這真是個仰頭無語問蒼天的好時機 補充說明 讓大家好做事 通常 Guideline 裡有的 就表示 RD 有內建元素可以套 不用自己硬刻 就算拿別人寫好的套件模組 也是要修改一下才能用 多少會有 bug 用內建的原生控件製作的 App 通常 Bug 會比較少 不只 PM 溝通方便 UI製作快速 RD Code 也好寫 QA 測試時 Bug 少他也省事

    Original URL path: http://blog.akanelee.me/posts/169176-the-importance-of-guideline (2016-05-02)
    Open archived version from archive

  • UI 怎麼面對 RD 的美學? « 嫁給RD的 UI Designer
    UI 哈 他們會把你當美工在用 UI 不會寫 Code 非常合理 但這不代表可以不懂功能 UI 最大的工作就是要把好抽象的功能變成好好用的介面 每個功能要花多久時間 這種操作方式需耗掉幾人日 如果能夠把這些都弄熟 RD 會很感激的 這表示他可以省下很多和人溝通 可能還會被學不會的那傢伙搞到氣身魯命的時間 常見的功能也就那幾種 每次遇到就做筆記 熬個一年兩年就差不多可以靠這本筆記打天下了 至於有的 RD 搞不清楚狀況 覺得自己會用 Photoshop 修修照片就很厲害 反過來站在 UI 背後指點江山 覺得以色事人者 人恆噬之 咱 UI 是整天和顏色為伍沒錯 但也輪不到 RD 張嘴亂咬 通常這類 RD 多背幾個名詞就覺得自己跨領域很了不起一夫當關萬夫莫敵 說得一嘴好程式 要注意 RD 對於元件使用和 Guideline 一定比 UI 熟上千百倍 這是不爭且無解的事實 而且還無法用 我覺得 來說服他 他會變成聽到雷的鴨子 能讓 RD 屈服的只有 理 如果他是寫 iOS 的 就和他討論 Android 規範 對付 Android 的 RD 就和他討論 iOS 如果剛好遇到這麼文武雙全的 就和他討論 Windows Phone 或黑莓機 通常就會有人摸摸鼻子走了 程式的領域隔行如隔山啊 如果他不走 可以想辦法把另一位 RD 引來加入戰局 當然是讓 RD 對付 RD 去啊 他們兩個會自己開戰 戰到忘記你的存在 之後看你是要去茶水間還是洗手間都沒差了 不過我會躲在旁邊偷聽對話內容 往往能學到不少有用的技術或觀念 就算什麼也學不到 聽聽他們怎麼吐槽對方也很有趣 RD 在他們自己的專業上抱持著強烈自信 大部份都是觸角星人 眼睛不是長在頭頂 根本長在頭頂的觸角上 只要不扯到本行專業他們都很謙虛 常聽到其他設計人抱怨 RD 對於介面長什麼樣子什麼意見都沒有 完全不懂美學 他們不是沒意見 是腦海裡組合不出適合的句子 當他對自己無法表達明確意見時會選擇沉默或是利用很模糊的字句蒙混過去 這看起來怪怪的 妳要不要改一下 哪裡怪怪的 不知道 就怪怪的 硬要 RD 針對介面風格設計給意見 很有機會出現這種有講跟沒講一樣的話 如果設計不會增加他們的開發工時 或是和 Guideline 相抵觸 RD 不太會對介面設計比手畫腳 除非交情太好可以胡亂嘴砲 所以當 RD 無法很精確地說出怎麼做時 通常就是他們心裡也沒底的時候 就只是個意見聽聽就好 UI 在修稿的時候多少曾遇過有人說 字幫我改成紅色 之類的要求 會發脾氣碎碎念 紅色 哪個紅啊 深紅淺紅粉紅紫紅洋紅赭紅 豬肝紅給你要不要 當 RD 聽到有人跟他說 這個字幫我放大一點 的時候 也差不多是這個樣子了 放多大 12pt 14pt 18pt 還是 48pt 啊 請給予 RD 精准 明確的指令 把可以用的衡量單位都用上 等一下在這裡集合 X 20分鐘後在公司 1 樓大門口集合 這個地圖插點要從這裡刷 地掉到這裡 X 這張 map icon png 請從 320 0 直線移動至 320 500 歷時0 6秒 請幫我插插頭 X 請幫我插吹風機的插頭 不知道是我發音有誤還是含魯蛋亦或是以上綜合 當我說 請幫我插插頭 的時候 老公無視我伸長的手上拿著吹風機插頭 他走去浴室拿了毛巾蓋在我頭上 擦擦頭 平時會擺出一副冷靜睿智的表情 卻老是會在莫名其妙的地方掉漆大爆笑 他還真的不是故意的 就跟羊肉爐一樣 Posted by Akane Lee December 30 2013 個人經驗 Tweet Comments Please enable JavaScript

    Original URL path: http://blog.akanelee.me/posts/160867-how-rd-ui-aesthetics (2016-05-02)
    Open archived version from archive

  • 我的 UI/UX 設計入門方式 « 嫁給RD的 UI Designer
    Evernote 做筆記也好 iOS 7 Design Resources Android Grids Windows Apps 手繪 念設計不代表手繪好 但手繪不好也很難成為一代宗師 不要被日系動漫騙了 沒幾兩肉的娘砲可以單手騎重機單手揮舞大劍 人家都說是幻想了不然咧 現實就是要靠練習才能成長 手繪是很多設計人的致命傷 如果你想走 UX 多少還是去學一下基礎素描 和人溝通現場撇幾筆很有用 如果想 UI 路線 你看 Dribbble 上哪個大師的手繪底子很差的 素描課不貴 畫室或是學校的推廣教育都有開課 還很便宜 我雖然是本科生 不過高職 3 年被當了 21 學分差點畢不了業 別再說什麼妳是本科生訓練紮實了 沒這回事 一直到研究所都畢業了才又回頭去畫室上課 發現是沒搞懂繪畫方法的問題 才把手繪救回來 有人說 我沒有畫畫的天分 這跟天份無關 靠的是方法和練習 我已經把繪畫當成是某種科學了 有固定的公式可以套用 背熟原則就好了 比如亮面 暗面 陰影 高光等等 對應不同材質也有不同表現技法 世界上常見材質就那幾種 玻璃 金屬 毛皮 木紋 塑膠 紙 等等 全部條列出來 一項項學著畫 全部都畫過 再深入下去就跟內力一樣靠時間磨 一天長一分 沒有武俠小說大還丹吃下去就長一甲子功力這種好康的事 UX 學素描目的在 訓練敢畫圖 的膽量 UI 要學的就比較多了 再去畫室報一堂水彩課吧 素描水彩都輪過一次就知道自己哪邊不足了 閱讀新知 多看看總是好的 不會講英文的人被丟到英國獨自求生 只要不老是跟講中文的人打交道 英文想練不起來都難 同樣 每天大量接觸 UI UX 資訊 看久了也能唬爛個幾句 現在是資訊爆炸的時代 每天不知道有多少文章在網路上發表 我的最愛裡加一堆書籤每天點一遍 不如學著用 RSS 直接把各站最新文章搜集在同一頁裡 Google 閱讀器死掉之後我改用 Feedly 配合 MAC 版 Reeder 訂閱太多的下場就是每天都有幾百篇的文要看 我不太在手機上看文章 會離開電腦又無聊到得開 RSS 的時候八成在搭捷運吧 晃來晃去硬要看小小的字太傷眼了 而且網路速度太慢 看個文章要等很久會煩躁 不如把腦袋放空休息一下 硬要推薦一套手機版的 RSS 還是 Reeder for iPhone 操作方式和電腦版一致 畫面風格也一致 以下是我有訂 RSS 又幾乎天天更新的優良好站 每天看 看個 1 年基本素養就有了 有寫筆記的話 出來騙吃騙喝說自己是 UI Designer 沒問題 PSD UI 設計師必備 頂尖 Photoshop 技術教學 對岸很多看起來很高明的中文教程其實都翻譯這個站的 這是一個系列站 包山包海什麼都有 從攝影 向量繪圖 網頁技術 影片剪輯到手工藝製作 挑自己適合的訂閱吧 Smashing Magazine 理論 商業模式 技術 設計通包的網站 幾乎是站在潮流最前端 看不懂也要訂一下 优设 對岸的站 比台灣的站多了很多對工作有實際幫助的文章 有很多翻譯文救了不少看不懂英文的設計師 他們還有線上免費講座可以聽很佛心有誠意了 更新速度很快 每天數篇 資源大全 整理得不錯 對於初學者來說是座寶山 強烈推薦安裝繁簡轉換外掛 同文堂 還是習慣看繁體中文 站酷 對岸設計人聚集的地方 很多教學文 因為該站是個人發表文主 有些文章內容有誤要小心 其中最推薦 影天醬 的文 會有頓悟升級的感覺 素材庫的資源也很多 小心版權問題 搜集資料 幾年前我是開資料夾做圖片整理 最近用了 SparkBox 來整理圖片 還不錯 就是有點頓 Pixa 在觀察範圍內 特別好的圖文就用 Evernote 另外存起來寫筆記 搜集來的東西都還是別人的 只有親手寫下筆記 思考消化後的東西才會是自己的 以下是拿來當激發靈感 參考對象的網站 Dribbble 我一定把這個放在搜集資料第一名 不是照三餐看 而是乾脆掛在上頭不下線了 世界各地高手雲集的地方 善用關鍵字搜尋 Popular 排序 你會得到全世界 它偏向概念性質 最新潮的設計 也許不怎麼實用 可以激發很多創意 作品圖片品質極佳 要模仿練習也有無數對象可以跟著學 Behance Adobe 的設計師作品發表平台 內容很多很雜包山包海 操作介面不太順 除非 Dribbble 真的找不到我想看的才會到這裡來挖 Pttrns Mbile Patterns lovely ui 這3個都是搜集漂亮的 iPhone iPad app 介面 Pattern 並分類的網站 Android Patterns Android 的 Pattern 一樣有分類 iOS Icon Gallery iOS Icon Design Gallery 美美的 Desktop icon Dribbble 看不夠時我會跑來這 CSS Galleries CSSMania siteInspire Web Design Inspiration CSS 網頁設計靈感來源 畢竟 Dribbble 是靜態一張圖 這邊是實際可操作的網站 執行逆向工程時好用 Mobile Web Design Best Mobile Websites Mobile Website Gallery 做 Responsive Web 好用的網站參考 最重要的是 保持對任何事物的好奇心和熱情 這點才是最難達成的 技術可以靠練習 一些鳥人破事卻會瞬間澆熄所有熱情 我也很常遇到 比起技術不足 更討厭和人與人之間的勾心鬥角 又不能喊 我只喜歡研究技術 畫漂亮的圖 拜託不要來找我麻煩 有這麼順利尾戒銷路會變差 香港天橋下的阿婆也會失業 自從和老公討論好 打定主意不要跳進去和某些被稱之為 亂象 的人群瞎攪和後 我總算可以用很酸的語氣和個人偏見寫文了 為了什麼營造專業形象 打好人際關係避免得罪他人通通閃邊去吧 又不發我薪管我糧的 網路發達真是件好事 可以躲在螢幕後面發廢文 喔對 我媽知道我在這裡發廢文 不用問了 Posted

    Original URL path: http://blog.akanelee.me/posts/169024-my-uiux-design-enter-methods (2016-05-02)
    Open archived version from archive

  • 初學者的 UI Flow « 嫁給RD的 UI Designer
    xxx 有關聯 將類似功能歸類在一起可以加強使用者對這個操作區塊的認知 或是 把最主要和常用的功能放到首頁能加快使用者的操作速度 這種有憑有據的說詞 也比較不會被反駁 如果一開始不知道 UI Flow 要怎麼開始 就表示 Functional Map 裡提到相關的功能或資訊歸類做得不夠好 一份好的 Functional Map 會清楚讓閱者知道哪些資訊要放在一起 哪些功能在某些模式下才會出現 根據 Functional Map 我會把 UI Flow 製作成這樣 可以看到 UI Flow 上不會有餐廳名稱 電話 地址之類的資訊 排序也和 Functional Map 不一樣 我把 UI Flow 當成是 Wireframe 的目錄 UI Flow 上有幾頁 Wireframe 就該有幾頁 所以打上編號 從 1 0 2 0 開始 必須從 1 0 這個頁面點進去的下一層就會是 1 1 以此類推 1 1 1 1 2 5 2 之類 可以看到圖上有 2 1a 帶個英文字母尾巴的頁面 是我個人習慣的作法 代表這一頁會是在不離開 2 1 的情況下出現新的操作視窗 比如 Popover 或 Modal window 等 好處是可以把 突發狀況 也考慮進去 讓 App 更完整 參考 各種狀態與突發狀況 有趣的是 UI Flow 可能會長得和 Functional Map 相去不遠 看起來就很像是同一份文件 事實上最大的差異在於 UI Flow 在呈現操作動線 頁面和頁面間的層級關係 至於頁面裡面要放什麼內容就要看 Functional Map 了 所以在畫 Wireframe 記得要把這兩份文件都打開 邊畫邊確認是不是所有提到的功能 資訊都有設計到無遺漏 我自己是會在做好的頁面和已規劃到的功能 資訊上打個勾 像 Todo List 這樣 UI Flow 會隨著 Wireframe 而變動是件很正常的事 雖說不應該隨著 Wireframe 更改 UI Flow 如果是做功能很多 或是購物網站這種大型 App Wireframe 畫一畫突然發現漏了什麼 回過頭去改 UI Flow 也是很正常的事 UI Flow 和 Functional Map Wireframe 記得要做版本控管啊 至於有的 UI Designer 喜歡做圖片版的 UI Flow 那也是在 Wireframe 畫完後才有辦法做得出來的 超 大 張 圖 到那個時候才來設計 UI Flow 就太晚了 很容易出現不合理的動線 我討厭那種大圖 原因見 什麼是 Wireframe 可以想成是老師發了一張全白的紙下來給大家自由發揮寫作文 你總不會把整篇文章都寫好了才開始畫格線吧 當然是先拿筆和尺把格線畫出來 再往格子裡填上字才會工整漂亮 請照著 Functional Map UI Flow Wireframe 的順序 最終結果才不會出現難以挽救的大洞 整個專案成員一起掉坑 還是屎坑 Posted by Akane Lee December 25 2013 初學者 ux Tweet Comments Please enable JavaScript to view the

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

  • 初學者的 Functional Map « 嫁給RD的 UI Designer
    和 Mockup 加上專輯的封面大圖 看起來很合理 但會害死人 規格書上沒寫所以當初在估工時沒算進去 萬一簽約時沒人發現 等到開工後的某一天突然發現多了這項 客戶又咬死當初約簽下去就包含這條不認帳 圖片要從哪裡來 API 怎麼接 合約白紙黑字簽在那裡又不是清朝的尚方寶劍吞下去就不計較 看到問題一定要先問清楚才執行 最起碼也要和相關人士討論一下吧 這種現象常見於搞不清楚專案執行方式的 UI 身上 2 亂加特效 左邊滑一下 唰 地飛進來 右邊點一下 嘩 地飛出去 視窗掉下來要彈跳一下 這邊圖片要轉個幾圈 那邊文字要有能飄飄然的動感 去跟 RD 這樣講啊 他如果只翻白眼給你看就是他修養太好 新手 UI 很常犯這個毛病 以為講幾個形容詞就能解釋到讓 RD 聽得懂 就算他聽得懂好了 特效越多工時就越長 一般情況下光寫功能 除蟲都來不及了還要幫忙處理 唰 地飛進來 嘩 地飛出去 這麼抽象的東西 放美術館裡就好 不要拿出來增加同事的工作負擔 3 不懂裝懂 或不會主動問 規格書上寫著 客戶指定要 sidebar cover flow 看不懂這是什麼好歹去 google 一下或問人好嗎 之前帶過一個新人 問她什麼都說懂 HIG 懂 Photoshop 懂 HTML 懂 CSS 懂 還真不知道 iPhone NavBar 什麼時候是 100px 高 Dreamweaver 滑鼠點一點叫會 HTML CSS 不懂就問啊 多問幾次就會了 不會也要老實說啊 打腫臉充胖子和欺騙我的 感情 信任有什麼兩樣 出社會又不是學校 還指望別人主動過來教喔 同事這麼辛苦多負擔保母一職 該不該給人家點津貼 早點發現問題可以早點治療 到後期爆炸了把整票同事扯下水 還怪同事怎麼不教 只能說 職場很危險的還是快回學校去吧 怎麼把需求變成功能 我念的研究所規定畢業一定要辦畢業展 每個人都要展出一份作品 於是打算做一款跟畢業展有關的 App 既然是和 展覽 有關的 App 最起碼要有展覽資訊吧 也要放一下到底有哪些參展作品和作者介紹 如果只是單純的放資訊 會不會太乾太無聊了點 加上掃 QRCode 會自動跳出語音導覽的功能如何 如果把APP要包含哪些 資訊 和哪些 功能 分開來整理 就會便成這樣 簡易版的 Functional Map 展覽資訊是一定要的 包含時間 地點 展覽主旨 作品要有作品簡介 要放大圖 也要有作者照片和簡介 要放幕後花絮 我們班感情可好得呢 就算這只是個自爽用的資訊也沒關係 功能部份 因為不打算花錢架伺服器 在一切都用現成免費資源的限制下訂出這幾樣 路徑規劃 用 google Map FREE Facebook 粉絲團 直接開 inappbrowser free QRCode 就那 25 個作品 直接寫死在 APP 裡 語音導覽 播放音訊檔 內建功能 因為時程關係 拿掉我本來很想要的 AR 擴增實境 不然應該會更炫才對 負責製作的 RD 表示 我怎麼會娶到妳這個麻煩精 我自己在用的 Functional Map 差不多也長這樣而已 頂多長得更整整漂亮一點 其實整理功能很簡單 聯想 分類 像樹狀圖一樣發展出去並條列出來就好了 能幫助思考有沒有什麼功能漏掉沒想到 有什麼資訊需要呈現卻沒寫上去等等 透過這份 Functional Map 才能設計 UI Flow 畫 Wireframe 大幅降低初期考慮不周導致專案後期要硬塞功能把介面搞的很醜動線很差的機率 Functional Map 記得 Mail 給 PM 和 RD 一份 請他們檢查有沒有疏失遺漏或做過頭 等他們都確認了再進行下一步 不要傻傻的自己一個人幹勁十足 之後被打掉重做再來抱怨公司不懂你 同事討厭你 大家都把麻煩扔給你 搞不清楚狀況 不曉得團隊合作的人

    Original URL path: http://blog.akanelee.me/posts/168560-functional-map (2016-05-02)
    Open archived version from archive

  • Copycat 你好,Copycat 再見 « 嫁給RD的 UI Designer
    我擅長的是 規劃 這個部份 不光只是視覺設計 我能從純文字間的 需求 轉變為功能 進而設計成真正好用的介面 連 RD 要怎麼寫程式才方便 客戶需要提供什麼樣的資料 這個 APP 未來的發展性 可以有什麼樣的附加價值都包含在我的考量範圍 UI Designer 不該只有 排排版 畫畫 icon 難怪很多人覺得介面設計就是平面設計 當面談話的 1 小時之內 Copycat 應該非常自豪他以社會新鮮人同時又是創辦人的身份做出一點成績 以至於我講什麼他都聽不進去 剛見面就問 妳對這個 App 有什麼想法 談了 20 分鐘後他又問 妳對這個 App 有什麼想法 我剛講的看法還翻其他高手作品分析給對方聽都是白噪音就是了 也許現在是笑貧不笑娼的年代 賺得到錢就好了 原創什麼的閃邊去 快速克隆成本低回收速度快 反正年輕大不了換個名字再來一次 他是位年紀比我還小的創辦人 剛脫離學校沒幾個月 就抱持這種想法在開發 App 我很難想像現在校園裡還有多少未來的從業人員都是用這種態度在看待開發軟體這項工作 抄襲和成功是兩回事 話說回來 真沒想到原來不看 Guideline 不管介面設計的人其實很多 我一直以為自己懂得這些經驗或知識 不過是多看幾本書 多爬幾個網站 多被 RD 罵幾次罷了 都是些大家都知道的小事 只是缺乏有人系統性的整理出來 沒想到事實並非這樣 明明 Google 打幾個字就有很多資料可以閱讀 就是有人不看 也難怪補習班這麼好賺 有興趣找我當講師的快來聯絡我

    Original URL path: http://blog.akanelee.me/posts/168426-bye-copycat (2016-05-02)
    Open archived version from archive

  • 我的選色技巧 « 嫁給RD的 UI Designer
    每位使用者都有不同的操作習慣 有的習慣看數字表格 有的擅長看線圖 有的同時需比對各個市場 只能抓出最重要 也共通的部份來統一 也就是下單 最好這麼簡單 下單方式隨便算都有四種以上 有的方式還得搭配線圖或表格 表單 這是要怎麼抓共通點啦 能做到的就是 簡化色彩 先把畫面上每個想搶走使用者視線的顏色打平 再來考慮哪個選項最常用 先講一下基本色彩學 圖是從 Photoshop 裡截出來的 所以看懂了就馬上能活用喔 框起來這條叫 色相 可以當它是 色彩的種類 這個水平的箭頭代表 彩度 表示顏色飽和度 這個垂直的箭頭代表 明度 表示顏色的亮還是暗 選色也有很多種模式 如果是做介面的話 我自己常用的是 HSB H 代表色相 S 代表彩度 B 代表明度 這表示所有顏色都是用3組數字組成 要牢記這個觀念 以後選色很好用 量化了喔 為什麼最常用到 HSB 呢 如果是 Navication Bar 底色要有光照感 需要上淺下深的感覺 只要調 B 明度 的數字就可以做出漂亮的漸層 我在 扁平化設計 基本雛型 也用過這個技巧 數字越大就越亮 淺色的數字如果是 100 純白 深色就可能會設個 80 淺灰 我自己喜歡讓深淺差異約在 10 20之 間 視情況而定 如果是同個畫面色彩要有一致性 先設定好一組 HSB 後 只要動 H 色相 這裡的數字 整個畫面的顏色看起來就很有一致性 但色相這回事比較複雜一點 會牽涉到 能量 小知識 色彩學其實是從 光 轉變而來的一門學問 自從牛頓 其他自己去看 光的色散 能量其實就是 震波 聲音是震波 光也是震波 大家都知道人的耳朵只能聽到一定頻率裡的聲音 超過或低於這個範圍的就聽不見 人的眼睛也是 顏色的種類是透過波長來決定 超過和低於某個範圍的色光就會看不到 如紫外線 紅外線等 回過頭來看 色相 這回事 既然顏色是波長決定 就不可能每個顏色都一樣 所以我們來看看色立體 可以看到黃色在最上方 藍色大多在底層 簡單來說 即使在明度 100 彩度 100 的情況下 不同色相還是會給人有不同明度的感覺 所以當你要用固定 S 彩度 B 明度 只調整 H 色相來讓畫面有一致性的時候 還是要加減一下彩度和明度的數字喔 對了 黑色 灰色 白色 在色彩學裡稱為 無色彩 也就是飽和度為 0 既然飽和度是0 那不管是哪個色相都起不了作用 只有明度會有影響 在考慮介面配色時我不會把這三色當成是配色的一部份 這是個人習慣聽聽就好 可能和很多人的認知不同 在明度控制好的情況下 任何顏色搭上這 3 色都不會發生互打的情況 所以我超愛用這3色 隨便另抓 2 個主色來當對比色點提畫重點用 就很有型 看是要走專業路線 還是要時尚潮流都沒問題 回到上方那個股市看盤軟體 不大量使用灰黑白去配色 我實在不知道要怎麼樣才能讓畫面變的更乾淨啊 Posted by Akane Lee December 19 2013 photoshop tutorials color UI Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 使用者經驗藏寶圖 創建人物 Copycat 你好 Copycat 再見 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年

    Original URL path: http://blog.akanelee.me/posts/167876-my-color-selection-tips (2016-05-02)
    Open archived version from archive

  • 使用者經驗藏寶圖:創建人物 « 嫁給RD的 UI Designer
    電影都演 3 部還外加復仇者聯盟 他的個性大家應該都知道 姓名 Anthony Edward Tony Stark 年齡 4x歲 參考 http ppt cc sqsq 職業 史塔克工業 總裁 個性 好大喜功重排場 典型的自戀狂 使用物品 鋼鐵衣 喜好 開發 當英雄 渴望 受到注目 操作行為 科學家習性讓他願意反復實驗取得數據 但自傲到目中無人的態度讓他做事莽撞沒耐性 傻了喔 史塔克 這樣的角色會需要 失物招領 嗎 不是喊聲 老賈 小辣椒 就是買新的 再不然乾脆自己開發寫程式 他可是 Tony Stark 耶 誰敢說自己寫程式搞開發贏得過他的 你覺得 Tony Stark 會需要有人幫他開發程式 Persona 法需要找位個性明確一點的人物當範本 可也不要找這種搬石頭砸自己腳的人物好嗎 換一個換一個 Star Trek 裡的 年輕 Spock 不提之前無數影集的話 好歹電影也出 2 部了 他的精密頭腦和 偽 冷血 碎碎念個性讓這個角色比熱血笨蛋主角寇克更受人歡迎 姓名 Spock 年齡 28歲 參考 http ppt cc hqv 職業 聯邦星艦企業號科學官 大副 個性 講究邏輯 善辯 傲嬌 喂 使用物品 通訊器 槍 喜好 智慧的對話和辯論 遵守制度和秩序 渴望 想要被瓦肯人接納 可是內心又很多地球人的衝動 相當壓抑 操作行為 喜歡嘗試新事物 討厭繁文縟節 習慣謀定而後動 參考 http allyourtrekarebelongto us kslikes htm 這幾行文字絕對比不上看了電影 徹底感受 Spock 的魅力 沒看過的非常推薦去租片回來看 大推 再舉一個個性和他完全相反的角色 電影出了 4 部 每一部電影都在找東西掉東西 非常適合拿來當成 失物招領 的 APP 模擬使用者 而且個性比史巴克更明顯更好掌握 也更欠揍 的人物 兩人的共通點就是話多碎碎念 不要跳起來抗議他的年代沒有手機沒有程式這回事 在 Persona 裡我們取的是他的 個性 姓名 Jack Sparrow 年齡 26歲 對岸某知識 找到 我不太信就是了 職業 海盜 個性 狡猾 利己 偏執 使用物品 槍 羅盤 萊姆酒 劍 喜好 以最小傷亡獲得最大利益 談判 渴望 海盗式的自由 操作行為 無論熟不熟悉的事物會一副無所謂的樣子 假裝不在意 實際上很懂得活用 即使操作方式並非該物被設計出來的原本用意 Sparrow 這傢伙不就是最會跳脫設計師原本預期的操作方式 所謂難搞的使用者類型嗎 超有誠意的舉了 3 個都姓史 喂 的角色 正反例子都有了 這有夠難寫的 找了很多設定集 還不一定有資料 下一篇就是要將史巴克和史派羅套入預設的模擬情境 Storyboard 裡 咦 不是說好了這篇要認真點嗎 我覺得我很認真啊 這些資料很難找耶 感謝友人 Edwin 幫忙收集角色資料 Posted by Akane Lee December 18 2013 使用者經驗藏寶圖 UI ux Tweet Comments Please enable JavaScript to view the comments

    Original URL path: http://blog.akanelee.me/posts/167498-user-experience-treasure-map-2 (2016-05-02)
    Open archived version from archive