像APP設計師一樣思考 Ⅱ

(接上篇)

用各種各樣的操作系統


當你設計移動應用的時候不能只參考自己的手機。如果你的目標是全球移動市場,你必須至少用包括Android, iOS 和 Windows Phone設備,并且不斷的習慣于使用他們完全明白每個平臺不同的使用場景。

事實上世界上的設計不從iPhone開始和結束。很多設計師把自己局限在iOS里面,當設計安卓的時候,他們只是轉譯——通常幾乎逐字逐句轉譯原始的App。


一個像tab一樣簡單的導航資源以不同形式應用于iOS,Android 和Windows Phone

交互模式(例如設計中已經確立的解決問題的方法)在每個操作系統中是不同的。同樣的,設計師必須頻繁的換系統從而了解和正確的使用他們。

舉幾個例子,在每個操作系統中tab的位置,怎么樣去展示菜單,什么時候、怎樣展示首要和次要動作都是不同的。

你可以跟隨這里的幾個實用的小練習學習每個系統的模式:在不同的手機上下載和安裝同一App,并用仔細分析他們的異同;他們的模式將是不同的。所以,如果你發現一個App在iOS和Android看起來運行起來幾乎一樣,可能哪個做的不太正確。


Instagram在iOS和Android上看起來極其相似。開發者看起來將沒有遵循基本交互模式的app傳到Android。例如,tab在安卓版本中應該在屏幕的上部。

此外,不斷的看和試玩別人的應用是一個解決你自己界面問題的很好的方法。比如說很多時候當我們感到創作受阻或者不知道如何解決一個問題,我會玩我的手機看看它們如何解決我正面對的問題。

如果你身邊沒有手機,可以點開包含豐富案例網站像PttrnsAndroid?App?PatternsWindows?Phone?UI?Design?Patterns,可能對你有幫助。


規范所有東西


敏捷開發的方法需要理解一些東西將會呈現出什么樣子和功能實現之前的樣子。同樣的,原型幫我們評估產品的可用性(通過用戶測試)。理想上,我們搭建第一個原型不需要太長時間。


原型可以是覆蓋著紙的木板,像這個例子中掌上電腦原型。

可能很少有人記得掌上電腦:第一個原型之一是木板帶著畫著界面設計的紙。員工可以像真實設備一樣把它放在行李里帶著。

它的目的是測試尺寸和使用的舒適程度,這個原型已經足夠了。問題在于測試你構思到什么程度才可以開始設計,然后著手工作。

如今出現了許多原型工具甚至可以在智能手機上看起來像完成的產品一樣。也就是說,原型不止展示靜態設計;它同樣包括圖片、轉場效果和手勢。


POP可以讓你拍攝紙上的設計并且在幾分鐘之內建起可交互原型。

通過你的工作流程、你想實現的和你期望的結果來決定選擇最合適的工具。比如說,當只有紙上的簡單線框圖時我常常用POP。用這個App我可以為設計拍照,添加手勢和轉場效果,又快又簡單!

但是當一個概念更超前時我發現使用像Sketch這樣的設計專用軟件更加方便,用Marvel,FlintoInVision,可以做出更優美的原型。(注意有些時候它未必比另一些好。選擇哪個在一定程度上取決于你覺得哪個用起來更順手。)

之前提到過,現在出現了大量的原型App,幾個月前我決定建立一個小網站列出所有我知道的。網站提供每個工具特征的概述幫助你選擇。


我的個人項目Prototyping Tools

另一方面,像安卓系統的“material design”將更多關注細微交互效果。設計制作細微交互效果的原型是今天很多設計師的職責。(像Keynote這樣的工具可以讓你輕松制作這種細節。Keynote魔法動作選項遲早派的上用場。)


不要相信你看到的


當設計web端產品的時候,可以在工作的時候看到它運作起來的樣子。但是App你必須在移動設備上測試才能看到界面的樣子(功能)。首先,這種測試對決定對比度和尺寸是必要的。

針對Android和iOS幫助設計師在不同分辨率的移動屏幕上看他們的作品的工具,對于iOS,最有名的是LiveView。另一個我用的最多的是帶臺式機版本可以在Mac上使用的Skala(Android和iOS同樣適用),如果你用Sketch你可以嘗試Sketch Mirror

不幸的是,這種工具沒有適用于Windows和Windows?Phone?(至少我不知道)。


Pixate擁有一個app可以將電腦和手機預覽你的作品。

?在的工作流程中,每下一步開始前我常在手機上預覽設計以確保它是我想要的樣子。同樣的,我通常一次以一個系統的設計作為開始,而且大部分時間將手機放在身邊。這樣我可以時常檢查我的作品將怎樣在屏幕上呈現,同時完成第一批線框圖,我確定尺寸(圖形、文本和控件),對比度和顏色是不是我預期的樣子。如果你不這樣做,可能當你后來發現問題的時候將需要更多的時間修正。

同樣重要的是用與預覽作品的手機同樣尺寸(長和寬)設計文檔開始工作。(注意:如果你為不同屏幕尺寸設計,請記住像素不再是測量尺寸的做好方式,因為不同系統他們會發生變化——例如,注意iOS上的點和安卓中的density-independent?pixels。某種程度上你必須完全理解如何設計和在移動應用領域制作圖片的不同。)

當你的設計已經被開發者實現,檢查App在不同的手機和不同版本系統上看起來和運行起來的樣子,而不是只是你手邊最好的手機。


謙卑的設計


App設計師必須拋棄創作最終版產品的觀念。App永遠不會完成,因為它是隨著時間進化的數字產品。正是由于這個原因,我們不能站在絕對的立場從事界面設計。而應該通過可用性測試和破譯用戶遭遇的問題來定位。

當用戶在使用App的過程中犯錯并感到困惑時我們設計師有時候傾向于逃脫責任。但事實上很有可能是我們錯了。

檢測到問題(并發現我們的錯誤)不是一件壞事。當然,這是一次學習和糾正工作的機會,從而改進它使它更好用。做設計必須保持謙卑的態度。

在曾經工作過公司,每次告訴老板我完成了一個設計,他就會問我:“你已經找用戶測試過了嗎?”我通常沒有測試過,但是最后我把它變成一個習慣,并且每次我測試的時候都準備好開放的頭腦,愿意看到發現的問題。

這個只有等你成熟到能夠接受你的錯誤并從中學習的時候你才能做到。這很難,但是為了成功這樣做是值得的。


保持在最前沿


當為明天而設計時信息數量使得事物幾乎不可能保持原樣。然而,做為App設計師,我們必須對新鮮事物和將要發生的事情保持好奇。

這包括App設計趨勢、系統新版本。無論喜歡與否,為了保持前沿看到最新的App設計我們不得不安裝新系統。

閱讀系統新版本官方設計指南是一種獲取多種多樣設計信息的好方法。你同樣可以像行業先鋒學習像Josh?ClarkLuke?Wroblewski

保持在前沿同樣意味著嘗試使用市場上出現的,能夠簡化設計和使我們工作更高效的工具。我們不能害怕離開心理舒適區或不敢拋棄工作和設計的老路。


Sketch是一個相對新的工具,用起來同樣相當簡單。

按照這些原則,不久前我終于敢用Sketch。最開始有一點難,因為從頭開始學新東西,當我不得不用它時候我對這已知的工具已經用著順手了。

幾個月之后的現在我發現這個軟件擁有一個容易接受的學習曲線。它節省了我的時間并且使我工作時頭腦靈活,這是對我愿意學習新東西的一種獎勵。

小結

最后,從心底里適應App設計。沒有人強制你這樣做,如果你不適應,你將有可能除了做icon外別無所長,而這只是一個巨大設計流程中小小的一環。

首先,App設計需要一種新的思考方式。是時候離開網站設計的牢籠并理解智能手機與便筏甚至手表是完全獨立與不同的。這是真正這是設計完整、復雜的移動產品的唯一途徑。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,076評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 今天不上班。 睡到自然醒。 三兩好友,一本好書,一杯咖啡,一次愉快的睡眠,這大概就是目前理想的生活,可遇不可求。 ...
    寂鏡閱讀 426評論 2 7
  • 相關HTML 、CSS樣式、布局學習 positionheader 標簽定義文檔的頁眉(介紹信息)。font-w...
    z嘉嘉嘉閱讀 483評論 0 1
  • 時間過的好快,轉眼新的一年過去了10天。周二白天和三菱電機的銷售會面。晚上和大學最好的姐妹會面。 延紅非常喜歡金剛...
    唐豆閱讀 220評論 0 0