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".
  • 工作清單:Mockup « 嫁給RD的 UI Designer
    或類似的功能 可以節省修改時間 規範文件 Mockup 和視覺規範 風格指南一類的文件息息相關 此類型文件不會一個月 3 個版本 同等於公司的 CIS 如果公司有這種文件就照作 沒有 這文件過時了好醜 所以無視這回事 你會嫌公司 logo 長太醜有事沒事就去改它嗎 參考 Guideline 的重要性 iOS Guideline 怎麼看 1 尺寸 Grid Wireframe 是什麼 Mockup 就是什麼 Mockup 是什麼 最後產出就是什麼 我一直覺得有了規範 尺寸 Grid 就喊侷限自由 扼殺創意的設計師都是搞不清楚狀況的那一群 反問他們侷限扼殺了什麼又回答不出來 文字 正常情況下 Mockup 是什麼 最後產出就是什麼 所以沒有 Mockup 和最終產品長不一樣這回事 各平台都有各自能使用的內建字體 能用內建文字盡量用內建 App 用內建字體 中文字型檔都很肥一包 不要為了文字硬包字型檔進 App 裡讓使用者下載 Web 網路上很多 Web Font 服務可自由使用 Mockup 用什麼字體最後產出就會用什麼字體 不要為了美觀 Mockup 用華康儷黑體結果最終的 Web 還是黑體繁 參考 iOS Android 字級單位 動態特效 有很多種作法 在製作前請先和 RD 討論清楚定義規格 mov gif 逐格 程式計算 mov gif 直接出影片動畫檔 基本按照圖檔的方式出檔案給 RD 就好了 製作前請先問過檔案格式和限制 逐格 出很多張尺寸一樣的圖片 請 RD 1 秒播個 30 張之類 用靜態手法製作動畫或互動 程式計算 給 RD 元件 時間 座標等資訊 由程式產出動態效果 如果是用內建效果或是套件包之類 設計師不會比 RD 熟悉寫 Code 問清楚需要提供什麼樣的圖檔後再動工 別瞎猜 以上是不照做會和人結冤仇的部份 以下是做得爛頂多長得醜很難用的部份 易用性 美學 圖學 色彩學 字學 排版 等等 從易用的角度來看以上都有一定程度的規則可依循 但從 美 的角度來看就會出現主觀意識 請以 先求好用 再求漂亮 的順序檢視 Mockup 易用性參考 十大易用性原則 色彩學參考 色盲者使用的配色檢測法 標示色碼的方法 我的選色技巧 結論 基本上通通照著 Wireframe 畫就不會有問題 也只能照畫不要亂腦補 不然你畫 Wireframe 幹嘛 有缺有漏就要回到 Wireframe 修改完再開始做 Mockup 多花點時間在 Functional Map UI Flow Wireframe 這三個階段 可以減少 Mockup 來回修改的時間 如果你不知道 Mockup 是什麼 請參考 初學者的 Mockup 同樣的東西一直重複出現 都不知道要寫什麼好了 Posted by Akane Lee September 22 2014 Mockup 工作清單 Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 找份正常的設計工作真難 工作清單 切圖 Akane Lee Recent Posts UI 設計入門班 學員心得

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

  • Tag : Mockup « 嫁給RD的 UI Designer
    Read on 工作清單 Mockup September 22 2014 Comments 以我自己的工作流程 會是 Functional Map UI Flow Wireframe Mockup 切圖 標示文件 當然在更前期會有 UX 研究 最後會接 HTML 等等 但就一位 UI Designer 來說應該是這些 對 Mockup 而言 Wireframe 有什麼就畫什麼 不要亂改亂腦補 而且遵守 PSD 製作禮儀 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12

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

  • 找份正常的設計工作真難 « 嫁給RD的 UI Designer
    coding programming能力 精通程式編寫 有場景設計能力 製作動畫能力 手繪與角色骨架能力佳 After Effect 影片剪輯能力 CIS識別設計能力 數位行銷網路服務經驗 具備文案撰寫能力 各種 工作內容 接聽客服電話 協助照片拍攝 商品攝影及修圖 尋找合適圖片搭配文章主題 支援各部門 跑跑腿 泡咖啡 接待日本同事 架設FTP 人物設定 原畫 真希望可以看到徵工程師 然後要求條件包含商品攝影修圖 或是寫文案 製作動畫之類的廣告 主考官根本不知道 UI 在做什麼 之前找工作遇到這樣子的強者 那時候還太嫩跟對方灰了 40 分鐘 4 分鐘就該離開了 對方拿出 iPhone 指著螢幕上至少 20 個 app 要我一顆顆分析介紹為什麼那個 App 要是這個顏色 那個形狀 妳最喜歡哪個 妳最討厭哪個 是妳的話會怎麼設計 跟我說這就是 UI 我也太客氣想說對方快 50 歲要給點面子 光這部份就灰了半小時 完全沒看作品集 之後被問到現在學生都可以寫 APP 一頁 500 元 為什麼來面試的還敢開這麼高的薪 他覺得資深設計最多就是 4 萬 還嘀咕連 RD 都沒有這個價 這次面試經驗讓我對找工作這件事非常嚴格 官網做太爛 HR 熱情過頭 跨產業撈過界的都 PASS 害我對搞論壇社群雲端主機的公司印象很差 因為沒工作一時心急放棄原則亂投履歷的下場 完全自找的 找資深設計 卻要上機考 我長期掛 Soft job 版 RD 上機考好像很正常 設計師大概有作品集一翻兩瞪眼所以不太會遇到 這間是我第一次遇到要上機考的公司 第 1 題 請把 iPad 介面改成 iPhone 第 2 題 請用提供的素材做出和範例圖一模一樣的海報 兩題請在 30 分鐘內完成 有點忘記是不是 資深 這個職稱 但開出來的條件有 3 年以上經驗這條 我有向他們反應上機考這件事對找 有經驗 的設計師來說頗讓人反感 對方說他們面試那麼多人 我是第一個反應 上機考讓人不爽 的應試者 而且他們之前有遇過作品集很漂亮 但實際上什麼都不會的設計師 這表示他們沒有足夠的能力從作品集中知道應試者的實力 應徵設計 主考官是 RD 普遍 RD 瞧不起做設計的 可是應徵設計職缺 常常遇到 RD 當主考官 這哪裡怪怪的 我被幾種 RD 面試過 從 MIS 寫JS的 前端 後端 基層 主管 創辦人 大神通通都有 通常我會把他們分成 2 大類 腦袋清楚的 腦袋還沒拆封的 任何腦袋正常的 RD 都不會在面試時拿自己的弱項撞設計師的強項 敢在面試時跟我討論 PS 技巧並且想無理強壓的 都會被歸到腦袋沒拆過那類去 有技術實力的 RD 屬頭腦清楚的那類 跟你談的是 邏輯 邏輯是設計師的致命傷 可是邏輯不通的 RD 也很多啊囧 幾次和大神們的面試經驗很棒 非常輕鬆 從對話方式就知道對方的程度在哪 不需要刻意把思考多切幾個分斷點敘述 輕輕點到大家都心領神會 但也遇過講半天對方聽不懂 不肯聽別人說話 堅持他講的才是真理的那種 明明 RD 和 RD 間相處憑實力 或寫的語言種類 說話 但對上設計師就通通把設計師當美工看 有趣的是 位階越高 越被稱為 大神 的幾位 RD 對做設計的人態度很明顯區分成 1 設計師 2 美工 他們知道設計的重要性 並給與尊重 同時抱持著 把美工當美工看錯了嗎 的心態 更有趣的是 他們不會用設計師的 技術 來區分他是師還是美工 而是以對方的

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

  • 工作清單:Wireframe « 嫁給RD的 UI Designer
    規則 比如 Bootstrap Smart TV Definition of Application Screen Layout 參考 Grid 的運用 PS外掛 Fixed Grid System詳解 狀態變化 如果 Functional Map 和 UI Flow 都有規劃到 那只要耐心地將所有狀態變化畫出來就好 參考 各種狀態與突發狀況 需要注意 Flow 不會特別註明 但還是要在 Wireframe 寫清楚的部份 按鈕狀態 讀取中 圖表 選單 按鈕狀態 按鈕狀態包含下列數種 一般 normal 點擊 highlight 無法被點選 disable 多選 select 注意 Web Desktop 和 Web Mobile 的操作方式不同 Desktop 有 a hover 可用 但 Mobile 沒有 讀取中 如果頁面 圖片等等須要連網更新 就要考慮製作 讀取中 的提示狀態 圖表 產品裡如果包含圖表 記得要給 RD 產生圖表的規則 每個數值 欄位是怎麼來的 這部份可能會是 PM 或 BD 產出 如果沒有 請在小組會議上提起這件事要求專案成員提供 選單 所有選項都該被列出 尤其是下拉式選單 文字 圖片 Wireframe 雖然去除視覺影響 但文字 h1 h2 p 等各種形態仍要統一 比如所有標題都用 20px 副標 18px 內文 14px 圖片尺寸也同樣要有統一性 文字 圖片 文字 畫 Wireframe 時 PM BD 不一定能提供定版的文案 此時會用假字 假字內容越接近產品最終形態越好 比如標題文字就給一個像是真正會被使用的標題 時間文字直接打上2014年9月19日 需考量某個區塊的文字必須全部顯示 又有可能會有好幾行和一兩個字的極端情況 圖片 Wireframe 不會使用真正圖片 而是使用方框或填充灰色的方塊代表 尺寸要與最終產品上出現的圖片尺寸一樣 連結 觸發這個元件後頁面會導到哪裡去 請對照 UI Flow 的頁面編號 連到哪一頁 出現什麼 連到哪一頁 有些元件觸發後會連到其他頁面 元件旁就要寫明 因為做了什麼事 所以連到哪一頁 標上連結過去的頁面編號 跳出什麼 有些元件觸發後不會連到其他頁面 而是出現 Popover Modal Window 之類的視窗或選單 同樣要在該元件旁註明 因為做了什麼事 所以出現什麼 特效 各式動態效果 能讓產品看起來很炫 但拿掉也不會影響到功能的部份 規劃特效動畫前請先和 RD 討論實作可行性 嚴禁設計師自己一個人天馬行空腦補 特效 轉場 音效 震動 特效 某些小地方使用特效動畫有畫龍點睛之效 用太兇會造成使用者反感 RD 也會想揍你 Wireframe 上要寫明特效呈現方式 圖文很難表達時請另附件範例 務必要讓接手 Wireframe 的人能理解 轉場 頁面和頁面之間的過場動畫 轉場動畫可提示使用者這個頁面是依附在前頁 還是中斷目前操作 轉場動畫時間不要太頻繁 時間過長 使用者容易疲憊厭煩 Xcode 內建數種轉場方式 也有人用 Swift 寫了套件 請和 RD 討論好要用哪種方式處理再註明到 Wireframe 上 外部影響 各種外部輸入而影響頁面的可能 手勢 Portrait 和 Landscape 搖晃 語音 外部設備 結論 Wireframe 是線框稿沒錯 但在產品開發上它不僅僅是線框稿這麼簡單 Wireframe

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

  • 工作清單:UI Flow « 嫁給RD的 UI Designer
    頁面編號 UI Flow 上規劃幾頁 Wireframe 就該畫幾頁 建議在 Flow 上規劃的每個頁面都標上編號方便對照製作 參考 初學者的 UI Flow 如果你擔心漏掉某些在 Fnctional Map 上規劃好的功能 找個空白的地方寫上說明 標明這個編號的頁面要包含哪些內容 哪些功能 Functional Map 上有什麼 UI Flow 全部都要規劃到 可以在 Functional Map 上將已完成規劃的內容和功能一項項打勾 確保沒有遺漏 並減少 Wireframe 畫到一半發現某個功能忘記了回頭修改 UI Flow 的機率 結論 UI Flow 在這個階段還是純文字版本 有了合乎邏輯的操作動線後才會往下個階段前進 所以不會是先畫頁面再考慮操作動線 而是 先考慮操作合理性 再來配置版面 以前我不太會需要開一個區塊 標明頁面編號 然後寫上功能和內容 直接對照 Functional Map 就能看懂 是因為案子太小 且都我自己一個人處理 靠腦袋理解強記就行了 一旦產品複雜龐大的時候靠人腦完全不足以記得當初每一個頁面為什麼會這樣規劃 或是 Functional Map UI Flow Wireframe Mockup 都由不同的專案成員處理時 文件越詳細 越不需要人講解就能看懂越好 Posted by Akane

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

  • Tag : UI Flow « 嫁給RD的 UI Designer
    工作清單 Functional Map 後 繼續來寫 UI Flow 這部份 如果你不知道什麼是 UI Flow 請參考 初學者的 UI Flow 這篇文 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12 胡說八道 37 UI雜談 32 實作技巧 27 軟體工具 22 實戰備忘 14 聽演講心得 10 Web 9 UX相關 10 好書推薦 15 旅遊見聞 12 讀者來信

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

  • 業主的喜好 « 嫁給RD的 UI Designer
    花 RMB 是可以買得到的 還頗貴 我於本以為這顆 icon 大概就是那種情況下的產物吧 視線就這樣掃過去 然後 停在一個非常訝異的地方 啥 啥 啥 啥 圖片取自 http drbl in mpAd 這和世界知名設計公司的技術無關 業主喜歡什麼最終產品就會變成什麼 非常活生生的例子 Posted by Akane Lee September 18 2014 WTF Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 工作清單 Functional Map 工作清單 UI Flow Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout

    Original URL path: http://blog.akanelee.me/posts/233945-owners-preferences (2016-05-02)
    Open archived version from archive

  • Tag : WTF « 嫁給RD的 UI Designer
    Dribbble 上的作品讓我差點跪下來哭 常用 Dribbble 的人應該都看過 Ramotion 這間公司的作品 他們專門製作 高品質 的 icon 和 介面設計 是世界級知名的設計公司 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12 胡說八道 37 UI雜談 32 實作技巧 27 軟體工具 22 實戰備忘 14 聽演講心得 10 Web 9 UX相關 10 好書推薦 15 旅遊見聞 12 讀者來信 5 UI和RD

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



  •