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
    凹槽的陰影 有時正上方90度角的設定會讓圖層顯得扁平無立體感 可以偷偷將角度改成120度 6 為了更擬真 按鈕和厚度之間需加上高光 製作一個淺色的橢圓形 7 高斯模糊後把橢圓形壓得扁扁的 8 可以使用方向鍵微調高光的位置 並降低透明度 9 加強厚度的陰影處 同樣使用壓扁的橢圓形 填上深色 10 高斯模糊後加上遮色片 11 調整透明度後 立體按鈕就完成囉 以上是我常使用的幾種做按鈕的技巧 因為 App 畫面就是這麼大 除了首頁會使用大顆較特別的按鈕外 內頁操作和 Navigation Bar 上的按鈕用基本篇的就夠了 太花俏反而易造成畫面混亂 請以易用性為基礎 再來考慮視覺效果 Posted by Akane Lee November 29 2013 photoshop tutorials Button Flat 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/163428-kinds-of-button-background-pro (2016-05-02)
    Open archived version from archive

  • Tag : Button « 嫁給RD的 UI Designer
    28 2013 Comments 最常見的按鈕就是個長條型的色塊 配上文字說明讓使用者知道點擊這個色塊能達到什麼目的 讓這個色塊擁有像現實生活的光影變化 在視覺上更顯精緻 可接著 各式按鈕作法 文字篇 的步驟接著做 Read on 各式按鈕背景 進階篇 November 29 2013 Comments 這篇會教大家怎麼在按鈕外圍做一圈凹陷的陰影 為了教學需要 有故意將效果做得誇張些 如果知道原理了 記得把數值調小一點比較自然 請接續 各式按鈕背景 基本篇 製作 Read on Akane Lee Recent Posts UI 設計入門班 學員心得 UI UX 吃貨群 2016 年 4 月書櫃 UI 設計師看 Auto Layout 讀者來信 UI 設計流程 iOS 字級表 我和老公的作品 如果你覺得這個 Blog 不錯 可以請我們喝杯紅茶 Categories 課程講座 12 胡說八道 37 UI雜談 32 實作技巧 27 軟體工具 22 實戰備忘

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

  • 各式按鈕作法:文字篇 « 嫁給RD的 UI Designer
    陰影 2字可別以為它只能用在加深顏色 反過來思考 若把內陰影設定成淺色不就成了邊緣高光了嗎 數值設定可以依畫面尺寸和光線來源設定 建議同樣使用和按鈕底圖相同的色系淺色 若文字已是淺色再使用純白 特別篇1 文字材質 文字加上材質有很多種作法 最簡單方便的就是使用 圖樣覆蓋 在設定圖樣覆蓋前先把 漸層覆蓋 調成色彩增值 讓設定的圖樣能顯示出來 圖樣覆蓋同樣使用色彩增值 可依材質不同調整透明度與縮放 特別篇2 文字凹陷 1 凹陷的文字也是種常見的作法 只要掌握內陰影和高光 就能做出凹陷的效果 比按鈕底色更深的文字漸層色 上淺下深 2 混合模式選擇 色彩增值 不透明度的百分比可自行調整 3 內陰影 使用比底圖更深的色彩 注意角度與間距 4 加上高光凸顯文字邊緣 讓按鈕更生動 5 也可以使用圖樣覆蓋製作文字材質 增加按鈕質感 以上共舉了 6 個例子 適合做比較大顆的按鈕 如果是 NavigationBar 上的按鈕我會省略很多文字材質上的細節 尺寸太小也看不出來 比起視覺美觀 我會優先考量易用性 明確的反差辨識度較高 有時得犧牲一些材質表現 先求不傷身再講療效 有空的話可以先跟著步驟做一次後設成 Style 以後直接套用改顏色改數值就好 然後就會忘記當初自己怎麼做出這個效果的 我就是這樣 Posted by Akane Lee November 27 2013 photoshop tutorials Button Flat Tweet

    Original URL path: http://blog.akanelee.me/posts/162861-kinds-of-button-text (2016-05-02)
    Open archived version from archive

  • 各種狀態與突發狀況 « 嫁給RD的 UI Designer
    定位較精準 但在室內或是高樓大廈多的都市裡誤差較大 所以這兩種方式通常會一起被使用 使用定位功能會有 2 種情況 可被定位 無法取得定位 有 GPS 的情況就是使用者正常操作 無 GPS 則會出現兩種使用情境 一是使用者有打開 GPS 但所在位置無訊號 另一種是使用者根本就沒開啟 GPS 功能 第一次使用到定位服務時 App 皆會詢問使用者是否允許 此時若使用者拒絕 則該 App 無法使用定位功能直到使用者在 設定 裡重新開啟 所以 App 在開發時需判斷使用者是否已開啟 GPS 功能 若無開啟要給予什麼樣的提示訊息 App 圈點 第一次開啟 App 的 GPS 權限設定 電話 電話撥打功能是個很有趣卻常被遺忘的部分 目前可安裝 iOS 的機型有3種 iPhone iPod iPad 其中只有 iPhone 能夠撥打電話 所以當 App 被安裝在 iPod iPad 上 使用者點擊撥打電話鈕時該如何回應 是告知硬體限制所以無法使用 還是乾脆拿掉這個按鈕 RD 辦得到偵測機型決定該按鈕是否顯示 UI 快去追殺他們 App Youlu Address Book 裝在 iPad 上 會員系統 會員系統十分複雜 尤其現在幾乎每支 App 都要和 Facebook 做串接的情況下 就不只有會員登入一項這麼簡單了 共有 6 種可能性會發生 無帳號 有帳號 輸入錯誤 忘記密碼 串接成功 串接失敗 無論是發生哪一種 皆有相對應的提示或後續操作 無帳號 進入註冊程序 有帳號 會分成輸入正確 輸入錯誤兩種 輸入錯誤 提示使用者帳號密碼輸入錯誤 忘記帳號密碼 進入查詢程序 突然斷線 在使用者輸入帳號密碼 等待伺服器驗證時網路突然中斷 需告知使用者目前因網路狀態而無法登入 串接成功 串接 Facebook 帳號成功 畫面轉至已登入的 App 操作頁面 串接失敗 提示使用者串接失敗 詢問是否稍後再試 或是註冊新會員 下載檔案 下載檔案的突發狀況也很多種 且有可能數種狀態同時發生 如下載到一半的檔案使用者是否可以刪除 還是得等檔案下載完成才給與使用者刪除的功能等等 共有可下載 無法下載 下載中 已下載 刪除 重新取回 突然斷線等 可下載 可正常下載網路上的檔案 無法下載 網路上的檔案因某種關係無法被下載 此時下載按鍵狀態為不可點擊 下載中 給予使用者正在下載的提示 最好能告知下載目前進度 如進度條 下載百分比等等 已下載 已下載的檔案需和未下載的檔案做視覺區隔 刪除 已下載 未下載 下載中的檔案是否皆可讓使用者自由刪除 重新取回 類似 App Store 的作法 已下載過的檔案不用再次輸入帳號密碼即可取回 突然斷線 若網路突然斷線 下載到一半的檔案要如何處理 是否有續傳功能 App iBooks 只有下載完成的檔案才能刪除 地圖 地圖也是App常見的功能 牽涉到網路 GPS定位 顯示筆數等等 網路和GPS可參考前述的 網路 狀態 顯示筆數則關係到硬體效能和網路傳輸速度 超出地圖顯示範圍和使用者的操作有關 這幾種是最容易發生需給予提示的狀態 無網路 參考前述 網路 部份 無定位 參考前述 定位 部份 筆數太多 當使用者查詢某項資訊 符合筆數可能會超出預期 可以告知使用者筆數太多請縮小查詢範圍 超出範圍 使用者想搜尋的目標不在地圖顯示的範圍內 需提醒使用者移動地圖 App PTT美食地圖 非常多筆資料同時呈現 密密麻麻的 搜尋 指的是條列式的搜尋功能 可分成兩種 需連接網路或是搜尋本地端資料 使用者可以輸入文字 或是選擇內建的篩選條件 有資料 顯示條列資料 可以進行第二次篩選 無資料 提示使用者無相關資料 編輯狀態下的搜尋 有的時候列表頁擁有編輯刪除和搜尋功能 要注意在編輯模式下若進行搜尋 頁面該如何呈現 最好簡化操作 搜尋範圍 有許多種作法 例如 Mail 的關鍵字搜尋 輸入框下方還可設定更詳細的條件 如果讓使用者自訂一個範圍 要注意最大值和最小值之間的關係 比如說已設定最低售價為 1000 元 那最高售價就不會小於 1000 需限制使用者的操作避免不合理的情況發生 App 博客來快找 私心偷渡我最喜歡的作家 XD 編輯 列表的編輯模式 內建可以進行刪除 排序 修改文字等 要注意的是和其他功能同時運作時可能會出現的狀況 刪除 列表頁中的刪除通常會有兩種 點擊右上角的編輯按鈕 點擊該欄位前方的刪除圓鈕 點擊確定 或是直接在瀏覽模式中在欲刪除的欄位上由右往左滑動 點擊刪除 大量刪除 最常見的是欄位前方放置勾選框 使用者一次點擊多項後再點選刪除 排序 通常使用內建元素 欄位右方會有 icon 可以按住拖曳 修改 列表欄位的左 中 右可以擁有不同的操作 左方會是刪除 右方是排序 點擊中間會跳出鍵盤可修改文字 讀取更多 可編輯的列表頁不見得只限定在本地資料 有可能會出現連網狀態 為了防止一次讀取太多筆數造成使用者等待 一次只顯示固定筆數 待使用者下拉到列尾再讀入更多資料 若採取這種設計 則需考慮使用者該如何操作編輯模式下的 讀取更多 App 提醒事項 編輯模式下左方有刪除 icon 右方有排序 icon 操作中斷 手持行動裝置最大的特色就是隨時可以跳出目前操作的 App 這時就需考慮使用者離開再進入後 畫面的呈現 區分為兩種 一種是 App 在背景模式待命 另一種是完全關閉 App 背景模式再度被開啟 應該要回到使用者最後操作的畫面 遊戲類 App 最常見的就是暫停頁 安全性較高的如銀行 與錢有關 App 的登入頁面通常有時間限制 即使在背景模式中 超過預定時間仍會自動登出 若 App 同步或上傳中途進入背景模式 就需要考慮續傳或提示同步失敗請重新再試 關閉 需保存重要資料 以便使用者下次開起能接續使用 以上文章內容是我做了很多個 App 累積下來的經驗 感謝被我拷問的老公 截圖很舊就別再念了 反正概念是共通的嘛 歡迎大家接力補完

    Original URL path: http://blog.akanelee.me/posts/162719-various-states-of-emergency (2016-05-02)
    Open archived version from archive

  • Portrait 和 Landscape,談螢幕方向 « 嫁給RD的 UI Designer
    Orientation 十分常見 iPhone 因為畫面較小 需要 Landscape 輔助顯示更多資料如圖表等等 iPad 因為畫面夠大 較少出現 Portrait 和 Landscape 呈現內容完全不同的情況 進階 有些 App 在 Landscape 時會在原始畫面上置入進一步功能 計算機 Portrait 基本型的計算機 適合簡單的四則運算 Landscape 工程用計算機 除專業人士外一般人不常使用 擴展 有些 App 在 Landscape 時會放大某部份的畫面 股市 Portrait 今日的股市概況 下半部為走勢圖 走勢圖為 Page Control 可左右滑動 Landscape 放大下半部的走勢圖 較大的圖表和字體更容易閱讀 同樣有 Page Control 可左右滑動 Safari Portrait 畫面上出現狀態列 導覽列 工具列及內容視窗 Landscape 狀態列消失 導覽列濃縮僅剩回前頁按鈕 工具列縮小為一顆快速鍵 點擊顯示完整的工具列和導覽列 備忘錄 Landscape 畫面分成左右兩個部份 選單和詳細內容 當畫面會切成兩欄時 主要目的通常是為了快速切換 選單和內容同時呈現 轉成 Portrait 模式時提供使用者能夠專注於目前工作且較大的顯示區域 Portrait 將選單縮小為左上方的按鈕 適應 也有 Portrait 和 Landscape 幾乎相同的情形 地圖 Portrait Landscape 畫面元素 操作方式幾乎完全相同 相機 Portrait Landscape icon 文字跟著畫面轉正 位置不變 相片 Portrait Landscape 狀態列 導覽列 工具列自動延伸 照片等比例縮小置中 設定 Portrait Landscape 畫面元素 操作方式幾乎完全相同 iTunes Portrait Landscape 畫面元素 操作方式幾乎完全相同 互補 有些 App 在 Landscape 時畫面會比 Portrait 顯示更多的資訊 行事曆 Portrait 日模式 擁有許多可操作元件 Landscape 切換成週模式 可操作的元件消失 以瀏覽為主 更多 有些 App 在轉橫之後畫面完全不同 音樂 Portrait 單曲播放模式 擁有許多可操作元件 Landscape 專輯選單 採用 Cover Flow 顯示 左右滑動選擇欲聆聽的專輯 以上僅列出較常見的部份 如果有漏的請跟我講 我會補上 寫好半年了才發佈是怎麼回事 自己在使用 iPhone 的時候 除了遊戲外 90 以上都是拿直的 如果不是點了某個按鈕 畫面鎖死在橫式螢幕逼你一定要轉橫看的話 很難發現轉橫後原來有另一種瀏覽方式 比如 MoneyBook finance with flair 這個記帳 App 天天使用它記錄開支 用了半年後的某天 躺在床上補記時才發現原來在 Store 上寫的圖表功能只要把畫面轉橫就會自動出現orz 重要的功能還是別把它藏在要讓使用者轉橫才會發現的介面上吧 我就是個活生生的操作例子 Posted by Akane Lee November 25 2013 UI ux iPhone iOS Tweet Comments Please enable JavaScript to view the comments powered by Disqus comments powered by Disqus App 切圖檔案命名方式 各種狀態與突發狀況 Akane Lee Recent Posts UI 設計入門班 學員心得 UI

    Original URL path: http://blog.akanelee.me/posts/162198-portrait-and-landscape (2016-05-02)
    Open archived version from archive

  • App 切圖檔案命名方式 « 嫁給RD的 UI Designer
    png 從整個頁面的大底圖 某個 TableView 的欄位底圖 Navigation Bar 的底圖都可算在背景範圍內 頁面背景 要留意整個畫面的高度 大多數的頁面需要扣除狀態列和 Navigation Bar 高度 如果畫面上有 Tab Bar 的話 底圖尺寸會更小 TableView 欄位底圖 運用在列表 列表欄位內容可能包含縮圖 說明文字 箭頭等 為了美感或是加快開發效率 有時會將縮圖和箭頭等直接做在底圖上 遇到這種情形請先向 RD 討論確認單一欄位內擁有哪些元素 又有哪些元素要直接做在底圖上 按鈕底圖 按鈕有很多種不同的作法 有的是將整個按鈕連帶文字一起切圖 有的運用在內建按鈕上 底圖和文字是分開的 在這邊指的是底圖和文字分開的按鈕 這種作法優點在於按鈕可隨文字長度自行加長縮短 底圖也會自行延展 不需將 App 內所有的按鈕都切圖出來 按鈕的切圖常以 btn xxx png 來命名 App 裡的按鈕擁有 4 種屬性 分別為一般 點擊 不能點擊 選中 但不追求精緻與完整度的話 只出一般屬性按鈕圖檔就可以了 在 iOS 上 RD 能在使用者點擊按鈕時將原圖檔變暗做為點擊提示 Android App 按鈕就一定要 2 張圖 一般狀態 點擊狀態 一般 normal btn xxx n png 最基本的按鈕外觀 點擊 highlight btn xxx h png 使用者觸摸螢幕碰到按鈕 為了告知使用者有點擊到而出現的回應提示 不能點擊 disabled btn xxx d png 代表App有這功能但使用者無法使用 例如如安裝在iPod上的App有播打電話功能時 既然不能被點擊乾脆直接隱藏的作法也是有的 要直接將按鈕隱藏或是以不能被點擊的狀態呈現需視情況決定 選中 selected btn xxx s png 選中出現在有複數選項時 但通常不會把按鈕拿去做複數選項控件 這種按鈕狀態出現的機會不高 此外 圖示 圖片 照片我也習慣有固定的命名方式 主要是讓 RD 能夠快速套圖 並沒有硬性規定該如何將圖檔分類命名 圖示 icon xxx png 圖片 pic xxx png 或是 img xxx png 照片 pho xxx png PS 如果是流水號的話 要從 0 開始編號喔 TabBar 上的 icon 作法較特殊 雖然它是 icon 但我不會以 icon xxx png 來命名 為了和其他 icon 作區隔 我會使用 tab xxx png 來表示 App App Store 若使用 iOS 內建的 TabBar 則 icon 尺寸 製圖方式都需依照規範 在 iOS5 之後 TabBar 可以變更 底圖和 icon 圖 不受黑底白 icon 的限制 TabBar 可分成三層 底圖層 選中時的高光層 icon層 App Find my friends 底圖層 高光層會因為 TabBar 個數不同而自動延伸 高度為 49px icon 需依 Guideline 製作 30x30px 加上選中時 icon 會改變 因此 TabBar 的切圖共有 4

    Original URL path: http://blog.akanelee.me/posts/161687-app-assets-naming-rule (2016-05-02)
    Open archived version from archive

  • 改不停的設計與加班 « 嫁給RD的 UI Designer
    個 Tab 還跟我說 多塞一個就好了哪有什麼難的 害我常常在客戶大放獗詞時用不怎麼靈光的心算統計月底還有多少帳單要繳 家裡就等這點米下鍋 客戶超喜歡不照合約走 嚴重讓人懷疑他們公司聘員工的標準是不是看不懂中文優先 視規格書和合約為無物 我有幸待過會挑客戶 擋客戶需求的好公司 沒什麼認識新同事的機會 也待過 PM 擋下需求 客戶當場說 那我跟你們老闆講 反正你們老闆不管我們說什麼都會說好 結果真的說好的公司 同事名字我根本記不住 對付都快結案了 設計還一直改的情況 我自己的作法是 一天工時多少就攤在那裡 在時間內要改稿幾次隨便你 反正下班時間到我就閃人 誰讓原本排好的時程軋不過來 誰就要負責處理炸鍋的責任 控管專案時程進度本來就不是 UI 的工作範圍 PM 在排人日前會先問過所需工時 當我報出這個數字時不接受殺價 也不接受 幫忙一下加個班 這種人情攻勢 誰敢跟我說 很簡單啦你就隨便弄弄很快就好 我就敢把 Photoshop 教學書丟過去說 很簡單啦你就隨便弄弄很快就好 公司桌上我常備幾本工具書 不只是自己查資料方便 堵人嘴也很好用 某位 BOSS 和我聊天的時候提到一句話 員工來上班是來賣藝 不是賣身的 非常讚同這句話 說到底 我是不加班主義者 家庭對我來講永遠比公司重要 況且出了社會後 打電動看漫畫下副本的時間幾乎都沒了 想追的動畫新番也沒空追 頂多看個雷神索爾 2 時喊喊 我要洛基的個人電影啦 好懷念以前組隊推倒阿薩斯 跑魂跑到卡點喊 GM 也沒救的年代啊 Posted by Akane Lee

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

  • 無損圖片的介面製作方式(下) « 嫁給RD的 UI Designer
    移除或隱藏 智慧型濾鏡可在 濾鏡 裡找到 如果該圖層不是智慧型圖層 又要套用智慧型濾鏡 Photoshop 會出現提示視窗 按下確定後就會把圖層轉變為智慧型圖層 此時使用的濾鏡就會自動套用智慧型濾鏡了 1 以高斯模糊為例 一般圖層套用高斯模糊後就無法再次修改 但智慧型濾鏡擁有多次修改的特性 2 在智慧型圖層下方出現已套用的濾鏡 此時在濾鏡圖層上點2下可再次編輯修改 3 利用智慧型圖層和智慧型濾鏡的特性 可以多次修改不怕破壞稿件 在 AI 畫好 貼到 PS 的技巧 如果比較熟悉 Illustrator 也可以先在 Illustrator 畫好再貼到 Photoshop 也是種作法 PS 畢竟不是向量軟體 要畫向量圖在 AI 畫方便很多 拷貝貼上時 Photoshop 會出現選單 如果已經是完整的圖案時請選擇智慧型圖層 若僅是單色圖樣 要在 Photoshop 裡上色彩與材質就選擇形狀圖層 像這種超過 1 種色彩的圖樣 建議使用智慧型圖層 雖然無法在 Photoshop 直接編輯 但能在不破壞原圖的情況下放大縮小不失真 如果是這種很單純只有一種顏色的圖案 可以直接以形狀圖層貼上 可使用 Photoshop 的形狀工具修改 遮色片 使用遮色片隱藏某個圖層的部分範圍及顯現位於下方的圖層 遮色片有兩種 一種是圖層遮色片 另一種是向量遮色片 圖層遮色片是以繪圖或選取工具編輯 受到解析度影響的點陣影像 向量圖遮色片則與解析度無關 由筆型或形狀工具建立而成 圖層遮色片和向量圖遮色片都是非破壞性的編輯方式 也就是說以後還可以回頭重新編輯遮色片 而不會遺失它們所隱藏的像素 1 向量遮色片製作方式較特別 使用形狀工具在欲製作遮色片的圖層上繪製 需注意繪製類型要是 路徑 2 在該圖層上選擇圖層 向量遮色片 目前路徑 3 未來要修改的話 一樣使用形狀工具 在向量遮色片上編輯就可以了 一般遮色片 這種作法在放大縮小時多多少少會造成圖像邊緣不銳利 但在做大圖縮小的情況下在手機上觀看其實差不了太多 如果偷懶的話可以用這種方式 1 一般的遮色片製作方式更簡單 在畫面上框選出範圍 2 選擇圖層 圖層遮色片 顯示選取範圍 3 完成 注意遮色片的特性都是 黑遮白秀 編修遮色片的時候黑色部份會擋住圖像 白色部分才會把圖像露出來 調整圖層 如果直接在圖片上執行色彩調整屬於破壞性編輯 為了保持原圖片不被改動 可使用 Photoshop 的 調整 功能 在圖片上新增調整圖層 它會將顏色和色調調整套用到影像上 但不會永久變更像素值 1 可以在視窗 調整裡把功能叫出來 2 點選調整功能 會出現很多種選擇 點選任一項會在圖層上新增該功能的圖層 3 如果需要調整 直接在圖層上點兩下 就會出現調整選單 這種作法無論修改再多次都不會破壞原本的圖案 以上是我在設計 APP 介面時的各種技巧 最常用的還是形狀圖層 在 iPhone 2x 圖檔要做 Android 的 XXHDPI 時特別好用 就是有客戶堅持 Android 的介面要和 iPhone 長一樣 講不聽 沒差我也省事 放大不失真的技巧應該是每位 UI 設計師都該知道的 常識 除非堅持針對每個不同解析度都要 重做 一套 PSD 檔 iOSx2 Androidx3 最少也是重做 5 次 反正現在流行扁平化 用形狀圖層非常方便 如果你還是習慣用選取框 填色的方式做圖的話 快改用形狀圖層吧 圖片不會長毛喔 Posted by Akane Lee November 21 2013 初學者 photoshop UI tutorials 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/161156-non-destructive-image-interface-modes-part-two (2016-05-02)
    Open archived version from archive