Blog
趨勢新知
躍出螢幕之外！好立體的扁平化 iOS 7 介面
2013-07-05
iOS 7的系統介面推出之後，許多設計師們也紛紛推出各種風格與概念迥異的概念iOS介面設計。
繼上次「看不慣iOS 7按鈕太扁平，設計師大改造」中分享了一個概念介面設計後，最近又有人以完全沒有任何漸層變化的扁平向量風，設計了一款Redesign版本的iOS 7概念按鈕介面設計。
由於其陰影色塊的特殊設計，從正面的角度觀看螢幕時，按鈕就好像有太陽照射一般，有陰影的色塊。而在一定角度(約45度)的瀏覽狀態下，平面的按鈕看起來更如同立體化了一般，躍出螢幕之外，視覺上相當的富有趣味！只不過按鈕間的辨識度，恐怕會讓人有點傻傻分不清楚啊！
資料來源：
http://www.behance.net/gallery/iOS-Icons/9503693
看不慣 iOS 7 按鈕太扁平，設計師大改造
2019-11-14
前幾日最新的iOS7系統發表後，很明顯地可以看出整個介面視覺已朝向扁平化設計，
所有的icon按鈕做了大翻新，與過去的iOS6做比較，可以發現icon介面設計上少了許多漸層、擬真的光影變化。
相信這樣的扁平設計按鈕，有許多人看得不大習慣(小編也好不習慣啊!!)，有鑑於此，國外的設計師Dmitry Kovalenko便為了iOS 7自行設計了一套自製icon。
Dmitry Kovalenko所設計的icon風格雖然也是朝向扁平化設計，但仍然保有部分的陰影效果，整個視覺上也不致於太過呆版，可以說是相當不錯的一種折衷設計方式，小編個人還蠻喜歡的，你覺得呢?
出處：http://www.behance.net/gallery/iOS-7-Redesign/9271243
新手爸媽的救星？紙尿布濕度偵測 APP
2013-06-07
哇哇哇~~~剛出生沒多久的寶寶哭了起來，到底是肚子餓了，還是太熱了呢? 喔!原來是紙尿布濕透了啊！
對於新手爸媽們而言，最麻煩的問題就是處理哭鬧的小寶寶了吧！寶寶哭的原因百百種，實在令人難以捉摸。
國外的紙尿布業者，開發了一套給爸爸媽媽們使用的嬰兒尿布APP裝置，分為軟體(Tweet Pee)與硬體(無線傳輸溼度偵測器)兩個部分，可以幫助你判斷寶寶的尿布是不是該更換了。
可愛的小藍雀濕度偵測器(羞)
這是個外觀印有可愛小藍雀的無線傳輸溼度偵測器，將其貼於寶寶的紙尿布上，就可以偵測紙尿布的潮濕程度，並同步將數據傳輸於手機的app上。爸爸媽媽們便可以透過手機上app-Tweet Pee的視覺化界面，直接監控寶寶的尿布潮濕程度，來決定是否需更換尿布，並且還可以記錄每天更換尿布的頻率，最後更直接結合了app線上購買紙尿布的功能，幾乎是整個紙尿布的使用流程都幫你考慮進去了呢！
紙尿布加上實用性強的APP，給消費者帶來額外的附加價值，還可以做另一層的行銷，真的是頗不錯的方法！
App icon Design 與色彩學 (下)
2012-12-12
暨之前分享的《【介面設計】App icon Design與色彩學#上》，帶大家初步的拆解一個好的App icon design需要的條件：
1.圖示與App功能內容的聯想性
2.圖示與App介面設計的風格一致性
3.圖示的明視度與注目性高
上篇主要分享的部分有滿大部分都是國外的設計案例，這次就讓我們把焦點移轉到台灣的App設計案例上來看看本土的設計吧！
1.圖示與App功能內容的聯想性
第一個案例我想滿多女性朋友會很熟悉，畢竟打開iPolice就能夠快速報案，《新北市iPolice》在icon設計中，直接採用了警察局警徽的圖像作為設計的主視覺，這種則是屬於“固有生活經驗的聯想設計”，是以大眾都已經累積的生活經驗，而且可以直覺反應的聯想去設計，所以看見《新北市iPolice》的icon就可以知道這是一支報案支援的便民App。
在色彩學上，有的人會將警徽上佔大部分的深灰色稱為「鐵灰色」，用了「鐵」這個物去形容「灰色」這個詞所產生的新形容詞，色彩學中稱為「固有色名」，如：鵝黃色、咖啡色、天空藍、橄欖綠、皮膚色……等，這種以現實中的事物去形容一個色彩的命名方式。
第二個分享的案例則是由”十三行”所開發的《懷舊日曆 Calendar》，非常直覺的以”撕日曆”這個行為作為介面設計，也是“固有生活經驗的聯想設計”的一例，以傳統日曆紙紅色的裝訂邊和綠色、橘色字樣為設計，介面學習的門檻低。
第三個分享案例則是今年10月初才開始發售的《殭屍巴下去(Slap That Zombie)》，這款由台灣遊戲開發團隊”LND”開發的體感式互動遊戲，在設計上以美術繪製的殭屍加上紫色的巴掌印作為icon，為主打的遊戲性埋下伏筆，透過鏡頭自動偵測玩家的手勢動作，以巴殭屍的手勢作為攻擊方式，在icon design上就看得出端倪喔！
2.圖示與App介面設計的風格一致性
第一個介紹的案例是由台灣創投團隊”Videohya”近期新推出的《卡通大粉絲》，是一支蒐藏各國著名卡通、卡通驚點語錄為主的娛樂型App，以手繪感的蠟筆線條為主風格，內部的使用介面也以剪貼感的蠟筆為美術風格，若是能夠也統一Tab bar的設計整體感會更加成熟喔！
第二個風格一致性的案例則是12月才剛上架的《快客鍵俠(Wagon Shootout)》，由台灣的”CocosPlay”團隊開發設計，整體畫風以西部荒野及漫畫線條為風格的角色扮演型射擊遊戲，有別於其他射擊遊戲的操作，而是將焦點放在打字快感的射擊方式，在icon design上的風格操作已經很成熟了，以盜賊的角色刻印與雙槍設計表現在小小的icon裡頭。
於今年11月底推出的《POP─Prototyping on Paper》是今年在App設計開發上非常實用的模擬工具，這款由台灣團隊”WOOMOO”開發的App設計流程模擬工具，主要功能是將紙上的App設計發想草圖，轉換在行動平台上模擬，一上到store便受到大家的矚目，它所提供的功能和介面設計是有考慮到風格上的一致，不過在色彩計畫上則是還有進步的空間；POP的icon design是使用黃橙色的漸層質感，據Inside在11月專訪開發團隊的內容，得知POP的icon的設計初衷是表達出筆記本的材質去設計，而在使用介面上則轉為暖褐色較為復古的調子，若是在icon design上能夠表達出紙上筆跡與發想草圖的概念會更好，也能讓不知道POP這款App的使用者能夠在第一時間強化紙上發想這件事。
3.圖示的明視度與注目性高
第一個案例是由”時間軸科技(Hiiir)”所推出的《巷弄》LBS服務的App，以直接明瞭的”巷弄”兩字做為主視覺，使用黑色與暖色調的橘色漸層做為icon design，除了icon可以在第一時間引起注目之外，巷弄的標準字也可以讓使用者聯想為地圖類型或是在地型的行動服務App。
第二個著重在注目性色彩設計的案例是由第五屆 appWorks的創投團隊”100ways studio”所設計的《喵咪方塊(MeowMeow Puzzle)》，icon design上使用注目性高的紅色色彩，再搭配上吸引眾多愛貓者的貓咪造型為icon，同為一個色彩運用的好好案例。
第三個介紹的案例是有別於#上篇所介紹的色彩吸引法則，由台灣的”艾比茲科技”所開發的《暖暖包》App，雖然內部的介面設計犯了一個讓使用者誤導的錯誤(這點有機會可以在後面UI的單元探討)，不過它的icon design大塊面以低飽和度的顏色，再加上容易聚集注目性的紅色為焦點，也是一個很好的明視度高、注目性也較高的設計案例。
在寫#下篇以前，筆者曾和幾位在UI設計領域內的好友討論，為什麼我需要花兩篇的文章來講一個App icon與色彩計畫？雖然一個App的好壞不只是有icon design這件事情需要探討，諸如：前導的使用演示介面設計、流程情境設計與美術主題的特色強化等，都是往後筆者會陸續分享的App UI設計面相，希望能夠分享更全面的內容給大家。
在UI設計這條軌道上，我們仍不斷學習和分享，也歡迎台灣的行動服務開發者能夠提供更多的使用經驗互相交流，感謝閱讀。
App icon Design 與色彩學 (上)
2012-11-23
自從智慧型手機火紅以來，每天都有大量的APP上架，讓我們來看看一些在Android上的icon design(圖示設計)案例：
▲ 左圖為聚集了各式不同形狀的icon桌面
▲ 右圖為使用桌面美化後的icon桌面
Wow!每天這些滿滿的icon塞在你的手機桌面，你會一一記住這些icon的位置嗎？不知道你有沒有發現，我們時常會將APP分類、群聚或是整體化，以左邊的桌面來說，每個icon都有它各自的特色和形狀，而右邊的桌面呢？則是多了一點統一的感覺，這是因為右邊的美化讓每個icon的設計都使用了同一種風格─“插畫風”。在這裡，icon design在APP市場上扮演著重要的第一印象。
我們打開手機第一件事情，一定是用你的眼睛去尋找你常用的應用程式，當然這個行為會被固定的位置或常用的類別來增加APP的辨識程度，當有成千上萬的APP icon顯示在你的螢幕上時，一個APP icon的辨識度和色彩設計就變得極為重要了，由於Windows Phone是使用一致性的isotype去設計，在這裡我們就不拿Windows Phone的icon做比較。 一個好的APP icon design需要有哪些部份呢？這裡我簡單列了三項重點：
1.圖示與APP功能內容的聯想性
▲ Designed by Konstantin Dats.
上圖為一位德國iOS UI設計師所設計的拳擊icon，雖然是未上市的新設計，但我們可以猜想這或許是一支拳擊遊戲的APP程式，有的網友在Konstantin Dats的頁面上留言這個icon是他見過最棒的icon設計，也有的人說讓他想到了拳王阿里而激起了拳擊的熱情，或許你會認為有點誇張，不過一個好的icon設計，是會讓使用者在第一時間內有關聯性的想像的，更何況設計者還使用了注目性高的紅色來跳脫一大堆APP icon的色彩浴中。
▲ Designed by Konstantin Dats.
Konstantin Dats.慣用的3D的寫實風格去設計icon，上幅作品是一個計數器的APP，一樣讓人很容易聯想到這支APP的用途和功能。
▲ Designed by Burç Pulathaneli
▲ Designed by Burç Pulathaneli
2.圖示與APP介面設計的風格一致性
大部分的人應該用過下圖的應用程式《Speed Test》，經典的儀表板設計，透過儀錶板介面來呈現網路速度的測試功能，在icon與使用介面風格的一致性上面，幾乎是每個好APP設計的基本條件。
即使是簡約型的設計也可以簡單而有整體感，從《Any.DO》這支APP的icon設計，大部分的人一眼就能知道大概是一支to do list型的工作清單紀錄程式。用一個表示”完成”的打勾符號做為icon的重點，簡單明瞭，介面設計亦然。
以鉛筆塗鴉為美術風格的《Lead Wars》或稱鉛筆戰爭，這款回合制戰略遊戲則是用統一的鉛筆角色來讓操作軍事單位，也可以調整紙的樣式和鉛筆的深淺色調，是滿有手繪特色的一個作品。
受到大家喜愛的《PIYOMORI》黏小雞遊戲在美術上面也是採用統一的3D風格為主，所以你不會看到沒有面數或立體感的石鍋，或是風格差異太大的手繪貼圖在裡面，可見一個icon和interface設計的介面統一性有多重要。
3.圖示的明視度與注目性高
一個容易吸引第一目光的icon design總是會伴隨的明視度高或注目性高的配色，經典的像是警戒的黃黑配色，在台灣黃黑配色則是用在交通的號誌設計和安全標示最多，這是因為在色彩學上，黃黑(或黑黃)配色的設計是明視度最高的，容易讓人一眼就辨識出來。
除此之外，次於黃黑的配色就是黑配亮綠、黑配橙、白配紫與白配深藍這樣的配色組合，在色彩學上是注目性較高的配色原則。
▲ Designed by Rodrigo Bellão
而Rodrigo Bellão設計師所設計的音樂APP icon則是黃黑配色的類似色黑配橙，明視度也相對高於一般用類似色所設計的icon。
看完以上三點，身為APP開發者的你，怎能小看這看似簡單的icon design? 一個好的icon設計可以帶你上天堂，當然，也可以讓你的作品飛到不知處的九霄雲外。