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".
  • RainFont 開發流程 « 嫁給RD的 UI Designer
    上 主頁面 字體列表 編輯文字頁 Wireframe 唯一一張殘留下來的 Wireframe 照慣例一定是 有畫和沒畫差不多 的亂撇 這階段確定操作 上下划動可放大縮小字級 左右划動切換字體 點擊左下角 icon 出現字體列表 右下角 icon 切換明暗 Mockup 這本來就是個很簡單的 App 現在流行扁平風真是太好了 我少做好多事 有興趣的可以下載 PSD 看看 不過我保證沒什麼內容 這 App 太簡單了也沒用上什麼進階技巧 就是打打字 拉拉向量矩型罷了 圖層命名按照 Slicy 規定等等 標示文件 不知道多久之前的標示文件 和現在上架的 App 不太一樣 加減看吧 標示文件上沒有放圖檔名稱是錯誤示範 不算 Desktop icon 的話這 App 也只有 4 張切圖 4顆小icon 就偷懶不寫了 特別說明 整個列表頁我都沒有出到半張圖 全部交給 RD 處理 字體預覽的灰色icon 由系統產生的 List RD 畫好圓角矩型後將大寫 A 用各種內建字體排序呈現 有的 A 很明顯沒有在灰底 icon 正中間 因為這字體基線和其他字體不同導致位置偏移 上下半透明漸層 字體列表的最上方和最下方有白色過渡用的半透明漸層 由 RD 設定 半透明黑底 圓角視窗 對話框尖角 同樣由 RD 製作 跟他說尺寸和不透明度就可以了 吵架 教訓 我們兩個都自以為是專業人士 這 App 太簡單了懶的做專案管理 下場就是從過年前一路拖到現在 還發生他覺得我都沒做事 我覺得他都在和呆阿伯玩所以大吵一架的誤會 就算再簡單的 App 還是乖乖照開發流程走吧 並一定要有人當 PM 控管進度 之後我們就把票都開上 GitLab 省得有人賴帳 就我自己 UI UX 的部份 非常後悔沒有把所有的溝通記錄保存起來 很多地方時間一拖久就忘記當時為什麼要這樣做 有些體驗 功能 微調真的很想要在第一版就處理起來 可這要看 RD 大人的意願 只好成為下一次更新內容 早知道當時就把所有要改的東西都寫進票裡訂死 未來改版 RainFont 在過年前就做好了 原本想微調很多地方後再上架 一拖就是3個月 實在不想改了乾脆先送審看看大家反應再說 已確定有許多部份會做修正 我早就喊要改了 字級選擇 現在滑動一次只能 1pt 不順手 編輯模式只能點 Done 回到主頁面 主頁面字體字級捲動的體驗 暫不新增字體搜尋 背景和文字的色彩選擇 台灣 Store https itunes apple com tw app rainfont id861338293 l zh mt 8 美國 Store https itunes apple com us app rainfont id861338293 ls 1 mt 8 如果你對 Code 部分有興趣 歡迎去 我老公的 Twitter 留言 快讓他知道很多人想盧他寫教學 他的 BLOG 不只長草 都快變叢林了 Posted by Akane Lee April 22 2014 app Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 字級表把妹 內有強光慎入 愛用的

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

  • 字級表把妹(內有強光慎入) « 嫁給RD的 UI Designer
    年的作品 而且某人只花了 2 個小時 就把我打發掉了 在第二代字級表上架的時候能找回這兩張珍貴的截圖非常非常感動 畢竟這款 I don t care SHOW ME THE MONEY 字級表 App 是老公送的第一份禮物 該說是太有創意還是沒情調 總之 我就是嫁給他了 唉 Rainfont 下載 https itunes apple com tw app rainfont id861338293 l zh mt 8 這是剛上架的第 2 代字級表 Rainfont 我和老公一起做的 是付費 App 而且目標族群很小 老公做給我用的 如果大家拿 請我和老公喝杯飲料 的心態買一下我會很高興 已經在著手更新了 早就跟他說很多地方要微調 RainFont 開發流程 Posted by Akane Lee April 22 2014 app Tweet Comments Please enable JavaScript to view the comments powered

    Original URL path: http://blog.akanelee.me/posts/195071-schedule-pickup (2016-05-02)
    Open archived version from archive

  • 教你一眼看穿職缺是不是雷 « 嫁給RD的 UI Designer
    UX 拆開不是因為他們懂什麼叫 UI UX 而是公司大了工作量也大 不拆成 2 份會做不完 員工數很多的公司 再大一點的公司會把平面 UI Web Wireframe 使用者測試分開 通常是知名企業才有足夠多的人數能這樣編制 但這不代表你進去就可以學到東西 我就遇到某號稱重視使用者經驗的全球企業 整個設計團隊都搞不清楚狀況 不管怎麼說 在台灣做設計的地位很低 無論是去大中小公司 都要有被 RD 或 PM BD 左改右改並被釘到翻過去的心理準備 八成是雷 可以打開職缺說明比對一下 寫得太簡單的有問題 寫得太長的也有問題 什麼都沒寫直接面議的請當作沒看到 1 要求技能超出 UI UX 的職務範圍 或是徵 UX 卻要求要會 PS 之類 這公司連 UI UX 是什麼都不清楚 你還敢去喔 2 工作內容包山包海 徵 UI UX 限熟3D 這一看就知道是萬能美工 什麼都要做 會開這種條件的 不只 HR 搞不清楚狀況 連公司主管也搞不清楚狀況 公司風氣不會尊重專業 肯定改到死和專做垃圾 我還看到徵 UI UX PM 都不知道該說什麼了 三位一體 3 喊口號 比如重複強調公司要求 高品質的設計 我們很重視xxxx 簡單提一兩次很合理 重復多次強調就表示這公司缺少 xxxx 所以他們期許新進的人員能帶給他們 xxxx 延伸思考 為什麼這公司沒有xxxx 是不是制度 流程 公司文化等等哪邊有問題 4 職缺文案寫得非常抽象 你將服務許多知名大企業 需要你的創意來帶動引領時代潮流 站在產業最尖端 100 是雷 什麼情況下不提正事卻需要講這麼多華美的詞句 又不是在賣 金坷垃 5 掛在上面很久不下架的 100 是雷 這職缺流動率是有多高 不然就哪邊有問題導致萬年徵不到人 比如薪水太低 環境太差 主管怪怪的 公司怪怪的 有些公司會用這種方式做宣傳 人力銀行年費繳了不用白不用 大公司萬年徵人不在此限 6 薪資範圍落差太大 3 萬 8 萬這種薪資落差太大的表示資深和新人的職缺開在一起 這公司根本不確定也不知道他們要找什麼樣的人 碰運氣談看看好了亂槍打鳥心態 公司對這個職務的認知不明確 可以去談看看 但要非常小心 雷味滿重的 公司作品 不管是外商 台商 外商皮台商骨的公司都一樣 新聞稿上寫自己非常重視使用者體驗 有一流的設計中心 有誰會這麼老實承認就是為了錢所以種族滅絕沒關係的啦 他說自己是誠實可靠小郎君你信嗎 去翻該公司的產品和大眾評價 一流的設計中心 注重使用者體驗 製造出來的產品該長什麼樣子 公家機關首頁嗎 隨便公司文案怎麼寫 官網 開發出來的產品沒辦法騙人 想辦法拿到實機就自己玩看看 千萬不要相信業配文說好用多好用 也不要相信 iTunes 上的星等 評語和排行榜名次 那些都可以洗榜作假 實際操作一遍最直接 篩選 通常我找工作會先把有雷味的全部跳過 不要浪費時間 剩下的再慢慢看 一定要打開公司官網去看它們歷年作品 再去 Google 一下公司名稱看看過往風評 順便把公司負責人也扔 Google 查一下 看他之前的發言和新聞 了解行事作風 需要 UI UX 設計的公司很多都是資訊業 愛用 PTT Soft Job 往往會翻到不少前人經驗 資本額也稍微看一下 資本額太低的通常沒有什麼預算請人 簡稱薪水不高 剩下的就看自己的想法和取捨了 唯一有爭議的就是 什麼也查不到 的情況 太乾淨了連官網都沒有 老實說這年頭什麼都查不到的公司我覺得很詭異 個人會直接 Pass 有些公司太新剛成立所以查不到很合理 就看個人判斷了 例外 如果是資訊業的新創公司 即使員工人數稀少 查不太到什麼資料 仍有去談談的價值 他們至少比大多數公司懂什麼叫 UI UX 開出來的條件和職務內容不會太莫名其妙 想學點東西可以往這類型的公司跑 如果面談感覺不錯倒是可以去試試看 不過找新成立的公司有個很大的風險叫 公司不穩 要有週轉不靈公司可能隨時會倒的心理準備 補充 收到有公司跟我抱怨 我忘了補上最重要的一句話 薪水給得夠多 再雷都會有人願意勉強一下 能燃燒多久就不知道了 畢竟大部份人出來工作都是為了討生活 不是做身體健康 就算都是

    Original URL path: http://blog.akanelee.me/posts/194716-job-landmine (2016-05-02)
    Open archived version from archive

  • Grid 的運用:PS外掛 « 嫁給RD的 UI Designer
    Velositey 支援一鍵生成 Grid 其他功能類似 WabZap 只是沒那麼精緻 安裝方式 1 Place Velositey folder in Adobe Photoshop CC Plug ins Panels 2 Launch Photoshop CC 3 In Photoshop go to Window Extensions Velositey WebZap 官方下載 http webzap uiparade com 付費軟體 非常好用 之前在 初學者的 Mockup 這篇文有出現過 光是看它產出的動作就有爽度 有種 喔喔喔 它自動在跑了耶 不用我自己拖拉個半天耶 好厲害啊 的心情 上述 3 款我都用過一陣子 各有利弊看各人喜好 用途不太一樣 當然付費軟體細節上比較優 個人支持 WebZap 錢都噴了當然要推別人下坑 Grid 我用 WebZap 當示範 自動產出這樣的 Grid 格線 從圖中很清楚可以看到分成紅 綠 藍 透明等幾個區塊 真正的內容區域只到左右兩邊的綠色而已 Column 欄 紅色 目前常見的大多切分成 12 格 當然也可以分成各種格數 但若要套用框架還是照大家常用的數值來做吧 Gutter 間隙 透明 欄和欄之間的間距 Grid padding 留白 綠色 主要文本和邊緣的間距 藍色 這區塊不在 Grid 計算內 但還是要設計喔 當螢幕持續拉伸 比如超大寬螢幕 不能夠把整塊主內容區也跟著拉大 文本圖片都會變形 當 Web 尺寸寬到一定程度時 還會持續左右展延的就只有藍色區塊 整個頁面的寬度等於 欄 間隙 留白 藍色區塊不算在內喔 欄 間隙 留白的數值沒有固定 比如下方這 3 種都不太一樣 960 Grid 欄 60px 間隙 20px 留白 10px 頁面寬度 960px WebZap 欄 60px 間隙 20px 留白 30px 頁面寬度 1000px Velositey 欄 65px 間隙 30px 留白 30px 頁面寬度 1170px 如果是Smart TV 的 Grid 16 9 情況下甚至沒有 Gutter 和 Grid padding 只有 Column 而且切分成 16 格 且在特定總寬下固定欄位尺寸 這種情況下我會套用 Susy 框架 彈性比 Bootstrap 大 想切幾格 間距 留白等等都能自由發揮 之後的文章會說明照著 Grid 畫好 Mockup 後 在 Susy 和 Bootstrap 要怎麼設定 我也只知道這 2 種怎麼操作 其他的不熟XD Posted by Akane Lee April 16 2014 photoshop tutorials UI Responsive Tweet Comments Please enable JavaScript to view the comments powered

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

  • iOS Guideline 怎麼看?(2) « 嫁給RD的 UI Designer
    或 按鈕更直覺 系統狀態的能見度 Visibility of system status 軟體應該保持相同的模式 透過適當的反應 在合理的時間內通知使用者 讓使用者了解正在發生的事情 讓使用者知道他的操作造成什麼反應 最基本的就是 點擊按鈕 iOS 系統內建按鈕可以在點擊 Tap 時變黑色 稱 Highlighted 表示可以偷懶少出一張切圖 但如果希望要漂亮一點的操作體驗 只要是可點擊的部份都要出 Normal Highlighted 兩張圖給 RD 除此之外 還有進度條 Hud 抬頭顯示器 動畫 震動 聲音 等等各種提示使用者的方法 但 聲音 不能成為唯一的反應機制 如果使用者設定靜音呢 From Concept to Product 從概念到產品 用一句話定義你的產品目標 可以用下列方法找出 App 定義 列出所有你覺得使用者可能喜歡的功能 確定使用者族群 篩選最主要的功能和重點族群 當你考慮新增功能時 想想看這功能是否必備 當你考慮使用者介面的外觀與行為時 考慮該族群的習慣 當你想新增一個術語時 想想目標族群是否能夠理解 為了完成某個任務 使用者可以透過APP完成什麼任務 盡可能減少使用者的認知負擔 想辦法達到與現實的一致性 內容才是重點 不要讓其他元素干擾 如果要自創控件 請再三思考是否會引起使用者誤解 密切關注使用者測試 可以製作 Prototype 幫助使用者測試 Case Study From Desktop to iOS 案例 桌面程式轉換成 iOS App 這章節都在講十大易用性原則實行方式 控件簡化 流程簡化等等 提出數個範例介紹 讓閱者建立基本概念 不是原封不動整套照搬就好 自己去官網看吧 Running on iPhone 5 在 iPhone5 上運作 iPhone4 螢幕長度比 iPhone5 短 除非你要放生 iPhon4s 以前的機型 不然這段很重要 如果不針對iPhone4 的App 進行修改 那麼它在 iPhone5 時 系統會自動在上方和下方加上黑色區塊填充版面 有幾種方式可以使用 列表類的可以在 iPhone5 顯示更多內容 可以設定垂直延展某一視圖 可以拉伸背景區域 或是乾脆讓主要操作區塊置中 盡量不要以 增加控件大小 的方式來處理 iOS 的 Responsive 問題 但可以增加控件和控件之間的距離 千萬不要在 iPhone5 多出來的位置塞入 iPhone4 看不到的元素 比如廣告之類 BTW 以上是我照自己的想法解釋出來的 Guideline 重點 覺得 大家都應該要知道 和太細節的部份就跳過了 要抱怨一下 iOS7 的Guideline 寫得實在不清不楚 很多東西要回頭去看 iOS6 才會知道 甚至藏在給 RD 看的文件裡 還只有一句話輕飄飄帶過 2014 年的 WWDC 快開始了 我猜 iOS8 不太會有像 6 7 這樣子大改版的情況 應該會把 Guideline 定義得更詳細一點 以上如有不爽請直接去看原文 看文件是每一位 UI 最基本要會的事 Guideline 都不看好意思跟人說你是專業人士 Posted by Akane Lee April 15 2014 Guideline 初學者 UI ux Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 台灣的 UI 設計 Grid 的運用 PS外掛 Akane

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

  • Tag : Guideline « 嫁給RD的 UI Designer
    高手們也老是跳脫 Guideline 設計啊 他們哪位不是對 Guideline 熟到可以朗朗上口到幾乎可以報頁碼的 不懂 Guideline 的就只能當美工用 連視覺設計都稱不上 Read on 3 種應用程式風格 January 6 2014 Comments 不要再叫 PM 或 BD 畫 Wieframe 他們真的不是 UI UX 的專業人士 如果注重專業 在約還沒簽 規格也還沒訂出來的時候就該把 UX 加進工作流程裡了 PM 最重要的工作是控管時程 各部門單位間溝通 BD 是廣義的 Marketing 也不該是這個位子的人在搞介面 畫 Wireframe 的是 UX 啊 UX Read on iOS Guideline 怎麼看 1 April 8 2014 Comments 這是給 UI 看的教學 發現太多人不看Guideline 基礎問題問了又問 明明官方文件擺在那 就算英文看不懂 Google 打下去對岸有很多翻譯成簡中版的 最最少留意一下尺寸吧 這次的 iOS7 官方文件省略很多沒寫到 建議回頭去看看

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

  • 台灣的 UI 設計 « 嫁給RD的 UI Designer
    美育 是最常被借課去上國英數的 搞得人人都不懂美 我都已經是本科生了 還是付錢去外頭上課才學會 如何鑑賞一幅畫 這種人人都應該要懂的事 說什麼體驗美不需要教育啊 這是與生俱來的本能 你真的覺得 美 不需要教育嗎 不要拿做 Web 那一套原封不動搬到 App 上 App 不是 Web 更不是 Mobile Web 在 App 裡放 Breadcrumb 麵包屑導覽列 是怎麼一回事 首頁 分類頁 次級分類頁 App 搞到要放麵包屑 根本就在告訴使用者 快來看 我的App邏輯思考很差喔 不放麵包屑你們就會迷路 扁平化不只是視覺上的 包含操作 層級等等都被簡化 如果還放上 Breadcrumb 表示 Flow 根本沒做好 iOS Guideline 就有提到這點 先別提什麼課外新知產業快訊時代潮流 連最基本的 Guideline 都不懂了還跟人談什麼 UI 設計 聽起來就像是九九乘法表沒背熟就跑去和人討論三角函數一樣 先生你來亂的是吧 在 RD 面前提 UI UX 還可能和他們辯個幾句 提實作性就等著被高壓電電死 這不是廢話嗎在做事寫扣的是他們啊 不過要是提到修改次數和被客戶盧的程度 放心好了 RD 還排在設計或美術後面 會妥協不是同意你說的話 而是再辯下去也沒有意義 反正薪水就是這麼多 炸鍋了回頭翻記錄罪人不是自己就好 這年頭只能靠良心做事 想做好事情都很難 這種風氣之下能生出什麼好產品 外行領導內行這事就不說了 看咱精美的政府 上行下效啊贛 十大易用性原則 幫助與說明文件 Help and documentation 一個軟體在完美的情形下不需要任何說明文件使用者就能夠操作 但就算是最好的軟體也需要提供幫助與說明文件 同理 好的 App 不需要說明文件就該能讓使用者知道如何操作 但不管是什麼樣的App還是寫一下教學會更貼心 從這句話看出什麼端倪了嗎 這表示 說明文件 是必備功能 但層級很低 所以不會出現在 Navigation Bar 或是 Tab Bar上 複雜到一定要看說明文件才知道怎麼操作 還說要 教育使用者 有那麼多更好更容易操作的 App 為什麼一定要用你家的 如果現在要我準備 UI 教學的課程大綱 目標族群是大學生 我保證第一學期他們只碰得到鉛筆橡皮擦 每週回家作業 找現有的 App 畫出該 App 的 Flow 和 Wireframe 至少10頁 期中考 iOS Guideline Android Design 填充題 期末考 默寫十大易用性原則並舉例說明 要上電腦 下學期再說 連爬 文 都不會還想走路 好用又很漂亮的 App 炫到把人弄暈這不叫潮叫腦袋進水 在 UI 的世界裡 好用 絕對比 好漂亮 優先 先考慮易用性 實作性 再來討論視覺外觀 除非你把 UI 當成是網路正妹 只是供起來好看又 不能用 內涵絕對比外在重要 以下推薦幾款好看又好用的 App Day one Tweetbot Phoster Grid Lens Hipstamatic Note d Yoritsuki 記帳 App 喔對 記帳 App 推薦 MoneyBook finance with flair 我抓了至少 30 個記帳 App 後的結論 控制預算 記流水帳非常方便 原本擬物風介面很漂亮改扁平後就少了點感覺 操作流暢到可以打開 App 10 秒結束記帳這一回合 Posted by Akane Lee April 14 2014 個人經驗 Tweet Comments Please

    Original URL path: http://blog.akanelee.me/posts/193861-taiwan-ui-design (2016-05-02)
    Open archived version from archive

  • 國泰世華 ATM 提款機 « 嫁給RD的 UI Designer
    借款服務的黃底白字分數是這樣 我把相近的色彩跑了一圈分數還是很破 為什麼會是左藍右粉 重看了一下整串 UI Flow 左邊都是藍的 右邊都是粉紅 為什麼 我以為該是用選項內容來歸類 用左邊右邊區分有什麼特殊意義 就個人生活習慣而言 我應該要去點 是 每次領錢都是領 3000元 要轉帳什麼的靠網路 要借錢找老公 ATM 對我只有領現金功能 但我完全不敢選 是 無法預期按下去後會發生什麼 應該還是停留在這個畫面啦 就覺得猜不透它 突然出現深灰色的按鈕 右邊粉色和藍色變的和之前有點不一樣 是我照片色偏嗎 要扁平風就扁徹底一點好嗎 icon用了很淺的顏色再加上內陰影 為什麼啊 結論 國泰世華這次的設計好潮好難懂 在操作過程中還會穿插一些說明頁或廣告頁 右下角的粉色按鈕完全沒有任何立體感或陰影 和背景融合的非常剛好 它成功讓使用者在廣告頁多停留了好幾秒 那顆該死的 SKIP 按鈕到底在哪裡 ATM 不是只有年輕人才會操作 有更多的長輩依賴它 比如每個月固定去 ATM 前領子女匯進來的生活費 設計得這麼 青春水漾 大概想改變銀行生冷的形象 只是改得一點都沒有國泰世華的感覺 還以為是哪個 iOS APP 整包原封不動移植到 WIN 8 上再塞進 ATM 裡 白色字體的可讀性原本就較深色字體低 還配上對比度不夠的底色根本為難視力不佳的使用者 就算所有介面按鈕位置和前一版相去不遠 卻也足夠讓第一次遇到的操作者滿畫面找哪裡可以按 拜託顧及一下無障礙 台灣都已經快和日本一樣成為高齡化社會了 Posted by Akane Lee April

    Original URL path: http://blog.akanelee.me/posts/193150-cathay-pacific-shihua-atm-cash-machine (2016-05-02)
    Open archived version from archive