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".
  • Icon Design:My Wallet « 嫁給RD的 UI Designer
    Sui 的皮夾可以用個 5 年沒問題 不然哪對得起它的售價 圖片取自 http goo gl 6xeCrJ 中間的玫瑰花非常難刻 塑膠油亮亮的質感表現不出來 因為我不會畫 囧 花最多時間的就是那堆金色凹洞 和縫線 學會點高光真的很重要 本來很平面沒有焦點的玫瑰花瞬間立體起來 至於製作過程或教學 看有沒有人想要了 再找機會吧 Posted by Akane Lee December 7 2013 Dribbble icon Behance Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 使用者經驗藏寶圖 序 反應與提示 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI

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

  • 使用者經驗藏寶圖:序 « 嫁給RD的 UI Designer
    開發者會從中整理成合理的資訊 使用者調查 為了驗證分析後的結果 需要進行使用者調查 從中發現與分析後資訊的共同點與差距 試著展示這一切 觀察使用者的滿意度 製作概念圖 零碎的資料越來越多 需要篩檢統整成可用的部份 概念圖可以幫助開發者加快工作效率 可以看到目前進行到什麼位置 未來將會做什麼 建立標準 澄清關係 並確定方向 概念圖有點類似心智圖 但比心智圖更嚴謹 用將抽象的形容以具體的詞彙表達 有了概念圖後 這項產品包含哪些項目一目了然 建立系統圖會更容易 製作系統圖 系統圖可以讓開發者與客戶瞭解這些功能是如何從有變成怎麼做 也代表這項產品真正需要的是什麼 沒列在系統圖理的就是不重要 可以被捨棄的部分 訂定頁面流程 確定功能之後 才能訂定頁面流程 這個步驟非常重要 能不能精簡使用者的操作 避免迴圈 死路 讓使用者覺得體貼方便 繪製 Wireframe 線稿 待流程都確定後才開始畫 Wireframe 線稿 Wireframe 又稱做介面框線 指的是去除視覺設計細節的原則下 以規劃頁面結構 資訊層次組織 功能以及內容的低保真原型 繪製介面框線的目的在於將每個功能化為實體可操作的介面元素 包含欲呈現的資訊內容 可操作的按鈕位置 版面的編排等等 設計故事板 如何要測試線稿圖是我們所要的呢 這時候需要故事板來輔助 隨著故事板中的時間 環境推移 不只可以表達產品和使用者之間的關係 從中能看出兩者之間的互動 發現線稿需要增加或減少的部份 概念設計 線稿可說是低保真度的原型 以快速修改 將腦中的構想迅速呈現為目的 並不那麼重視圖象的細節 到了概念設計階段才開始製作高保真度的圖象 加入視覺部份 對畫面細節以 1px 為單位斤斤計較 原型設計 我大約分成五個大類 紙上原型 裝置上的靜態圖片 可在裝置上進行互動的介面 影片視訊 程式碼 各有各的優缺點和適用時機 也有不同的限制 書面報告 做了這麼多前置工作 該是向客戶提出正式報告的時候了 將之前的概念 發想過程 各種圖表彙整起來 加入分析或建議提出書面報告 可以制定統一格式 為來在開發不同專案時都會派上用場 簡報檔 簡報檔也是很重要的環節 客戶不見得會有興趣看到一本厚厚的書面報告 對裡面的字句也不見得有耐心琢磨 要怎麼說服客戶就得靠簡報檔了 加上圖片 影音 讓說明的過程更多元化 要說服客戶 這個案子才有繼續發展的可能 排訂工作計畫與項目 客戶點頭同意確認後 總算可以開始規劃時程 排訂工作計畫與項目 分配工作給專案成員 開始撰寫程式 架設伺服器 建立後台等等 撰寫規格文件 一個案子從頭到尾都有可能會交派給其他人接手 所以規格文件非常重要 他是從 A 過渡到 B 的一個必要元素 文件寫的越詳細 接手的人就越能無縫接軌 介面規範 除了軟體規格外 介面也需要撰寫一份規範文件 從定義風格到每一個介面元素的色彩 尺寸 間距 包含字體 字級 色彩 過場動畫等等 供程式撰寫人員照此數據進行開發 未來若產品改版也可當成延續發展的依據 集結成冊成為設計模式 最後一步就是將所有的資料集結成冊 成為一種設計模式 這種設計模式指的不光只是針對這項產品 而是能夠轉換成其他專案也能套用的資源庫 未來在開發類似的產品時 也能用更快速完成開發前的討論工作 同樣的 除了不精準的翻譯之外 也加上我自己的經驗和個人想法 和原文多少會有不同之處 User Experience Deliverables 原文寫得很棒 都該去看一下 有時候限於公司規模或專案大小 不是這20個步驟都會跑一遍的 時間就是金錢 哪來這麼多錢可以讓 UI 去跑使用者測試這樣燒人日 通常都是腦海裡過個場就直接從製作概念圖下手了 原文也沒提到使用者測試喔科科 也有很多公司不會有 UI 的規格文件 介面規範 設計模式等等 因為前無古人後無來者 加上結案就 bye bye 不會再見了沒必要花人力在這部份上 未來我會針對這 20 個步驟提出個人實際運用心得和操作技巧 方法等 會寫得很苦吧我覺得 Posted by Akane Lee December 5 2013 使用者經驗藏寶圖 ux UI Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 扁平化設計 斜陰影 Icon Design My Wallet Akane Lee

    Original URL path: http://blog.akanelee.me/posts/165588-users-experience-a-treasure-map-sequence (2016-05-02)
    Open archived version from archive

  • 扁平化設計:斜陰影 « 嫁給RD的 UI Designer
    按 Ctrl T 出現變型框 使用鍵盤方向鍵 按一下 一下 按 enter 完成變形 同時按下 Ctrl Shift Alt T 會看到圖層快速增加 同時陰影層慢慢往右下角延伸 選取剛剛增加的圖層 選合併圖層 可以按個 100 下直接讓圖層增加到想要的長度再來合併 將陰影移到放大鏡下方 如果不喜歡圖層數量突然爆增 可以在陰影僅延伸一小段時便合併圖層 再複製一層陰影往右下角移動 同樣能把陰影加長 將兩個陰影合併成一個圖層 再複製一層陰影 重覆幾次複製陰影層 移動 合併的步驟 直到想要的長度 按住 Ctrl 點選圓角矩型 在陰影層上框出範圍 製作遮色片 讓陰影不會超出範圍 使用漸層工具 加強光影變化 調整圖層透明度 相信我好一陣子都不想寫扁平化的Photoshop教學文了 邊做邊截圖邊確認步驟邊打字好麻煩啊 有種步調一直被打亂的感覺 摔筆 這 icon 上還有很多細節可以添加 看個人喜好囉 Posted by Akane Lee December 4 2013 photoshop tutorials icon Flat Tweet Comments Please enable JavaScript to view the comments

    Original URL path: http://blog.akanelee.me/posts/165446-flat-design-diagonal-shadow (2016-05-02)
    Open archived version from archive

  • Tag : Flat « 嫁給RD的 UI Designer
    on 扁平化設計 高光 陰影 December 1 2013 Comments 有了基本雛型後可以開始添加細節 從放大鏡icon的優化開始 如果有上過素描課 老師會說明高光和陰影的重要性 扁平化設計將視覺元素抽掉很多 高光 漸層 陰影等基本組成因此變得更重要 更需要注意每 1px 的細部處理 Read on 扁平化設計 折頁 December 2 2013 Comments 翻頁效果也是很常見的扁平化小技巧 簡單幾個步驟就能完成了 請接著 扁平化設計 高光 陰影 繼續做喔 Read on 扁平化設計 厚度 December 3 2013 Comments 這張是 512 x 512 px 的 iOS Desktop icon 原始圖檔 可以看到在我放在 photoshop 分類中關於扁平化設計系列文章所製作出來的效果 高光線真的很重要 細細一條就能帶給人 厚度 和 轉折 的視覺效果 Read on 扁平化設計 斜陰影 December 4 2013 Comments 常常在扁平化的

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

  • 扁平化設計:厚度 « 嫁給RD的 UI Designer
    可以用 陰影 來假造厚度 把混合模式設為 正常 不透明度 100 尺寸為 0 間距數值多寡代表 icon 的厚度 可自由調整 把 Desktop icon 加上厚度是我最喜歡用的作法 平面式的 icon 略嫌單調 用這種方式馬上增加立體感與精緻度 當 iPhone 上都是平平的 icon 時 有厚度的 icon 會非常搶眼 大概因為透視感和其他都不一樣吧 扁平化設計其實很方便使用形狀圖層向量製作 不管怎麼放大縮小都不會耗損模糊 這對 Android 非常重要 螢幕尺寸真要命的好多種 Posted by Akane Lee December 3 2013 photoshop tutorials Flat icon Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 扁平化設計 折頁 扁平化設計 斜陰影 Akane Lee Recent

    Original URL path: http://blog.akanelee.me/posts/165252-flat-design-thickness (2016-05-02)
    Open archived version from archive

  • 扁平化設計:折頁 « 嫁給RD的 UI Designer
    10 以內 一切看製圖情況 很彈性的 如果你習慣用 ai 畫 icon 這種作法也很方便 不需要動到圖層樣式 複製 貼上 移動位置 設個半透明漸層就好 Posted by Akane Lee December 2 2013 photoshop tutorials icon Flat Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 扁平化設計 高光 陰影 扁平化設計 厚度 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品

    Original URL path: http://blog.akanelee.me/posts/164956-flat-design-folding (2016-05-02)
    Open archived version from archive

  • 扁平化設計:高光、陰影 « 嫁給RD的 UI Designer
    以上是很簡單扁平化設計 屬於邊緣銳利的高光和陰影作法 對於小型 icon 做到這個步驟就可以了 今天是星期日 我也只打算 PO 到這個地步 扁平化你好 扁平化再見 Posted by Akane Lee December 1 2013 photoshop tutorials icon Flat Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 扁平化設計 基本雛型 扁平化設計 折頁 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶

    Original URL path: http://blog.akanelee.me/posts/164894-flat-design-highlights-shadows (2016-05-02)
    Open archived version from archive

  • 扁平化設計:基本雛型 « 嫁給RD的 UI Designer
    按下Ctrl T 轉個方向 變成放大鏡icon 點選兩個圖層 垂直置中 水平置中 將放大鏡icon置於畫面中央 icon 的雛型就算完成了 很簡單吧 之後將開始進行各種細節處理 對扁平化設計有興趣的人可以先跟著基本篇做出一個 搜尋 icon 未來共有高光 折頁 厚度 斜陰影 4 種作法皆由基本雛型延續 反正我寫在 BLOG 上的教學都是很基本又很實用的技巧 很快就能學起來騙騙外行人好用 Posted by Akane Lee November 30 2013 photoshop tutorials Flat icon Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus 各式按鈕背景 進階篇 扁平化設計 高光 陰影 Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4

    Original URL path: http://blog.akanelee.me/posts/164847-flat-design-basic (2016-05-02)
    Open archived version from archive