設計出能快速辨認的icon

前幾天看到一篇再講關於設計快速辨認icon的文章:Optimizing UI icons for faster recognition。剛好這陣子手邊的某個案子有遇到類似問題。所以把它拿來筆記一下。以下是我自己看文章意思寫的,如果有寫錯快糾正我XD。

文章裡面把icon分為三種,分別是iconic, symbolic, and indexical。Iconic的icon通常指那些從外型中去辨別意思的,比如說放大鏡的圖示代表放大或縮小。Symbolic則是約定俗成的意義,比如說瀏覽器的重新整理圖示已經被普遍使用。(文中iconic舉的例是電話的icon,但是底下有人留言提到,現在普遍的青少年幾乎沒有使用電話習慣。反而是使用智慧型手機。所以我舉其他例子)

經過作者的實驗,(不意外地)iconic比symbolic的icon更能夠快速的讓使用者辨認出來。通常iconic比起symbolic更容易一眼就變認出icon所指的意思,不需要太多思考。不過經過學習之後,或許這點的影響會漸漸變小。(所以像是photoshop裡其實也是滿多symbolic icon的)

在icon的風格方面。我本來也和文章作者一樣以為線條風格會比填滿的icon還要更難辨視。而作者的實驗後發現沒有顯著的差異。不過要注意的是作者實驗的人數非常少,實驗結果可能會受到質疑。底下留言的人也有提到其實還有很多因素會影響到實驗結果,像是線條粗細等。在這個實驗中,作者還發現形狀類似或是意思相似的icon如果擺的很近,會讓使用者反應稍微遲鈍。而如果icon帶有文字一起的話,能夠讓辨識程度更好。(所以我在使用photoshop時通常會把縮起來的panel拉的寬一點,讓它顯示出文字。不然你看下圖筆刷和筆刷預設集,要從icon馬上辨識出來也太難了點

以上。只是筆記一下,好像寫的有點零散,加加減減看看。

just made a pure css slider :P

littlebigdetails:

Mac OS X Mountain Lion - When you plug in a non-touch mouse, scroll-bars appear on every windows automatically.

/via: @trixel

iOS Color Profile Problem

最近在設計app遇到了色彩管理問題:當我把設計好的mockup通通丟到手機要給同事瀏覽的時候,發現在iphone上出現了很嚴重的色差。原本以為是因為從dropbox或google drive傳到手機過程中的壓縮產生的色差。經過嘗試了各種傳檔方式(包括把圖檔丟到網路上再用safari看XD),還是同樣看到嚴重的色差。請教google大神後,才知道原來是因為iOS上沒有完善的color management。而這色差可能到多嚴重勒?分別用你的電腦和手機打開這個網頁,往下滾看到的第二張圖片會是完全不同的顏色。如果有做好色彩管理,照片會正常顯示。如果沒有,則會像網頁中第一張圖片那樣帥哥變成blue man。(經過測試android手機Samsung s2、HTC new one也會有同樣問題)

Color Management是什麼?

digital images such as the JPGs you find everywhere are made up of numerical data that becomes a picture only when interpreted for display by the viewing application……. The display application can make assumptions about how to convert that numerical data to color, or it can be told explicitly by various notations within the file.

為了要能夠讓顏色正確的顯示在載體上,圖檔除了每個pixel的rgba之外還有色彩描述檔,告知載體要怎麼把顏色正確的顯示出來。而很可惜的是智慧型裝置們目前對於這部份的支援還不足。所以如果要針對智慧型裝置做視覺設計,要稍微注意一下色彩描述檔的問題,避免產生不必要的色差。

如何避免

為了解決我遇到的色差問題,我找到了Bjango寫的Color Management and UI Design。有興趣的人我推薦看原文。如果是英文苦手可以看看我對內容做部分的翻譯:

在網頁與app,設計時使用的與最後呈現的都是電腦螢幕。我們希望設計使用的顏色和色碼都能和最後呈現時一致。根據Bjango文章作者的說法,最好解決這樣問題的方法,就是在使用的軟體中取消色彩管理。而在Photoshop中取消色彩管理的步驟如下:

  1. 在功能列表的編輯(Edit) > 顏色設定(Color Management) > 使用中色域(Working Spaces) > RGB > 選擇螢幕RGBA-display(Monitor RGB-Display)
  2. 在進階控制(Advanced Control)中取消使用Gamma混和RGB色彩(Blend Text Colors Using Gamma)
  3. 在功能列表的編輯(edit) > 指定描述檔(Assign Profile) > 選取不要對此文件進行色彩管理(Don’t Color Manage This Document)
  4. 在功能列表的檢視(View)>確認校樣色彩(Proof Colors)選項沒有被開啟
  5. 如果你要輸出切圖時使用儲存為網頁用(Save For Web)這個功能,記得取消轉換為sRGB(Convert to sRGB)。如果是輸出成jpg檔,記得取消嵌入色彩描述檔(Embed Color Profile)

完成以上步驟就可以放心的開始設計的的網頁了。如果你已經完成設計圖,但是在指定描述檔這個步驟完成後,顏色跑掉了。你可以使用轉換描述檔,讓你的顏色在轉換描述檔後不會跑掉。不過使用轉換描述檔要注意的是色彩資訊也會被轉換。經過以上步驟應該就能避免在手機上看到嚴重色差的成品。

以上內容都是我在這次遇到問題後從google上拿到的資料。如果有哪裡寫錯或翻錯,歡迎指教:)

tools I used for designing apps

開始工作後參加了不少社群或是Cof活動才發現有這麼多人無私提供了這麼多的資源。在coding上遠遠不及厲害的geeks,不過我想我可以在設計師端提供一點小小貢獻。 今天在這來介紹一些設計師在製作app時好能使用的一些小工具,以我前陣子在做的app,Vira,時用到的工具為例。Vira是我有經手的第三個app。不過在做前兩個app時,我根本連智慧型手機也沒有。所以這個app在某方面來說應該也能算我的處男作吧XD。如果你才剛要開始投入設計app或許對你會有點幫助。如果你已經做過好幾個app,我想你可能可以跳過這篇文章:P。
*因為我開發環境的關係,以下有部分app是iOS或OSX only。

1. POP

POP

第一個工具其實不用我多說介紹XD,我想大家都應該知道這個由國人開發,簡單方便的prototype工具。在設計app一開始最快速的當然還是用紙筆。在畫完sketch後可以馬上使用POP來製作prototype。如果你把比較完整的mockup丟上來做prototype後會有app馬上做完的錯覺來滿足一下成就感(?)。

2. Skala Preview

Skala Preview

在電腦螢幕看到的畫面總是和在手機上看會有差異。就算使用有Retina Display的MBP多少還是和在iphone上看到的不太一樣(至少感覺上啦XD)。所以我通常還是會把畫面丟到手機上預覽。能夠在手機上預覽的app其實也滿多的。除了Skala Preview之外還有像是XscopeLiveView等的服務可以使用。想要了解這些tool比較可以看一下這篇Quora上的文章。 Skala Preview的優點是簡單方便。只要分別在mac和手機上開啟app,把你想要呈現的圖片丟到app中,就可以馬上看到畫面啦!最方便的是,如果你是使用Photoshop來製作,讓Skala Preview連接到Photoshop後,就能夠Live Preview了!要檢視細微的畫面調整相當方便!Skala Preview+Skala View目前已經免費。是有沒有這麼佛心!

3. instashare

instashare

我習慣會把設計好的畫面直接放到手機上給同事看。可以把檔案丟到手機的app很多。個人偏好使用instashare。他在網站上是寫速度非常快,比其他傳輸方式快很多。其實有沒有比較快我不太清楚。不過在app設計上他利用音效和畫面來加強速度上的體驗(假象?)。所以使用上是還滿開心的,哈哈。 instashare有個缺點就是在管理檔案上不太方便。如果想要刪除檔案必須要一個一個刪除。所以如果要丟大量的檔案我還是會選擇Drive或Dropbox等雲端硬碟XD。

4. Google Drive / Dropbox

image image

我使用這兩個工具主要是在整個app畫面製作差不多時,會一次把所有圖檔同步在手機上,一張張仔細瀏覽。不過這種同步資料夾有時候圖檔修改一小部分更新後,另一端可能不會同步更新,有類似cache的問題。所以我通常只有要丟很多張圖才會想要使用他們。

5. Bugshot / Skitch

Bugshot Skitch

在把畫面丟給Developer製作後,通常因為畫面會有很多小細節是一眼無法看出來的。所以畫面來回修正幾次也是很正常的(就算有寫很詳細的document也總是容易遺漏小地方,ex:1pt的差距)。BugshotSkitch這兩個app是能夠讓你快速在圖片上標記箭頭文字等。這樣在畫面的來回修正就能很快速告訴對方要如何修改。Bugshot只能標記位置加上馬賽克等,Skitch則是可以輸入文字做更詳細的說明。不過因為Skitch是附屬在evernote下的軟體,又因為是圖片的傳輸。所以如果你是evernote免費用戶,上傳限制可能很快就會爆了。我第一次使用evernote premium帳號也是因為Skitch的關係XDD(還好之前參加evernote designathon獲得了免費的premium:P)。Bugshot只要$30但是功能稍嫌不足。

6. Prepo / Icon Strike!

Prepo

app除了app裡的畫面還有app icon要製作。Prepo能夠把你丟進去的圖片產生成各種iOS appicon所會出現的大小。包括在螢幕上、設定中、itunes裡等等的。如果想要直接在你的裝置上看到他輸出的那些icon需要$4.99。如果不想付錢可以使用Icon Strike!的服務。把製作好的圖片丟上去後,Icon Strike!會吐出一個網址。用手機safari打開這個網址後,加入home screen,就可以看到appicon出現在手機裡。(老實說有點麻煩XD)

以上就是大略的介紹。這些是我目前使用到的工具。也歡迎大家來交流一下:),或許還有很多好用的工具我沒發現。

最後來工商服務一下。文章一開始提到的app,Vira,最近會在google play與app store上架。這是一個設定目標,並透過遊戲化方式增強自我信心的app。有興趣的朋友可以到Vira的網站subscribe一下。製作這網站動畫的部份遇到一些效能的issue,有時間的話我也會把他拿出來聊聊:P。