對於介面設計實際在視覺設計上來說;其實有許多技巧是我比較不熟悉的,例如Metaphor的設計,以及對於介面設計上來說,如何恰到好處的將現實生活中人們對於事物的印象,轉化為介面設計的一些圖示或操作,好讓人們易於理解,又不至於失去了整體設計的一致性與美觀.剛好看到這篇文章,介紹的是介面設計在視覺設計上的真實度拿捏,以下稍做個整理.
使用者介面在視覺設計上的歷史可以看到,漸漸地轉化成寫實風格.隨著電腦的處理速度越來越快,設計師們也漸漸開始增加一些寫實的細節;例如顏色,3D效果,陰影,透明,甚至是簡單的物理特效等等.其中一些改變是有助於增加Usability.例如,視窗背後的陰影可以幫助我們知道哪一個視窗正在運作;iPhone介面的物體狀態(Physicality)讓裝置可以很自然地被使用.
圖形化使用者介面通常充滿著許多符號(symbols),大多數你在螢幕上所看到的圖形元素都是表示某個想法或是概念.譬如說,在你桌面上小房子的圖示不是真的表示為一個房子,他表示的是”首頁”;眼睛的圖示不是我們實際所指的眼睛;他的涵義是指”看著所選取的元素”.而齒輪不是一個真正的工具齒輪,他是指”按下我來查看可用的設定指令”.
細節(Details)以及寫實(Realism),有時候人們在進行設計時會搞混了上述這些概念.為了表示這些概念,以下將會透過Scott McCloud的書”Understanding Comics“來幫助解釋這一切.這本書是我認為所有的設計師應該要必讀的一本書.

看到這次UiGathering的演講內容投影片覺得沒去很可惜,兩位講者分享的東西都很棒!對於Motion User Interface的主題很有感覺,內容提供了我之前一直很想要了解在動態與靜態介面設計上的流程或是方法,做了一個很棒的分享.動態介面設計更要好好考量互動設計,轉化並放入必要的互動介面元素.更可以用Key frame與電影分鏡的概念下去設計與思考.
每個動態動畫都是事出有因,來自真實世界的感受.動態的spec的部分提供了一個很好的表式方式,這跟我們在做設計與開發上所用的函數使用是一樣的.讓我有個啟發,像是在Microsoft Expression Blend上的介面動態設定就有許多這樣的函數表示與影格,要去了解每個功能的意義與內化為一種自己的語言.由動切到靜態的設計更為重要,靜態包含了icon 顏色 版面配置等等…投影片都介紹的很詳細且重點都提示出來,動與靜是想輔想成的,抓到重點平衡好很重要.順便一提UIG粉絲團看到Ivan老師關注的東西:Motiongraphy, Typography, Movie Visual Effect (電影後製特效), Title Sequence (電影特效), Video Games,這些東西反應了一些事情,就是多看多觸發靈感,電影在這麼短的時間要表達重點給人們,是很好的觀察對象,遊戲特效也是,這些都可以激發不同的靈感.
智慧型手機與平板電腦相關產品越來越多了,相信這樣子的觸控產品,在軟體與應用程式設計上也產生了一些新的設計議題.我們回到基本,從實體人因工程的角度來看,人們使用這些產品上有怎樣的情形.
Dan Saffer撰寫了一篇由人因工程角度,平板電腦與手機的手部活動區域描述與準則.Dan Saffer一直是我很喜歡的一位互動設計師,有一本很入門的Designing for interaction就是他所著作的,另外Saffer在2010年也著作了一本Designing gestural interface,這本書主要描述當你在動作感應與觸控螢幕等裝置上進行相關應用設計時,需要考量那些要點在你的設計之中.
觀察 iPhone和iPad上的一些應用服務程序,我發現了一些符合人因工程觀點於輸入控制項的擺放,讓我們的雙手有著最佳操作,特別是人類大拇指的鞍狀關節,讓他能夠在一個特定-幾乎是45度的角度讓手指滾動掃描螢幕的內容.另外,為了能夠讓食指與拇指的延伸可以存取到螢幕的其他區域部分,也是需要一些Reach的區域.
當你在設計相關觸控設備的app時,為了能夠更make sense,設計的時候可以考量這些活動區域.把常常會控制的項目放到Easy zones之中,並且把那些較少用到的控制項(特別是那些你不想意外按下的東西)放到Reach zones.
Tablet Activity Zones

Mobile Phone Activity Zones

當然這樣的設計建議,通常是針對右撇子來考量,但是,反過來看這些區域就解決了.可能會有疑問地方在於,這樣的設計建議是否只針對Apple的產品? Saffer提到,基本上這樣的人因原則是適用在所有的產品上,除非我們今天討論到的是不同作業系統的介面設計,而非從設計一個app的角度來看.不過,這樣子的一個準則確實可以來提供app開發者們一些建議.
我想,這樣子的模式也可以進一步的再研究,譬如說在不同環境下的操作模式,或者透過Fitts’s Law來討論.
最後,下面的投影片,Saffer針對Gestural介面來做的討論.有興趣可以來看看.
最近看的一些影片.
