十佳應用的故事(2) – 視覺設計與開發
十佳應用的故事(2) – 視覺設計與開發-移動閱讀二維碼

從這里開始,事情變得真正讓人興奮起來;從這里開始,想法一點點變為現實;從這里開始,我們要將那些被用戶真實觸控到的界面元素設計并開發出來。

有些人認為,這個階段就是關于設計制作漂亮的圖片的,這是庸人之見。在這個階段,我們要在每個層次上對界面進行拋光打磨,包括交互方式、可用性和視覺表現方式。一個好的應用會從這里開始變的優秀。
雖然我們希望在交互階段制作的草圖或線框圖可以呈現出一個清晰的產品輪廓,但每當看到更加可視化的視覺稿,或是把玩著通過真實代碼制作的高保真原型時,我們意識到草圖和線框稿是遠遠不夠的。
同樣,當我們僅僅在畫草圖時,很難去設想出一些極具創意性的細節設計方案,而正是這些細節有可能將我們的應用推動至更高的層次上,超越可用性,給用戶帶來更多更真實的樂趣。當我們開始進行視覺隱喻、配色和紋理質感方面的工作時,將會更容易想到各種有趣的細節設計方案。
所以,這個階段的精髓就在于拋光、打磨,而且這是整個設計開發流程中最有回報感,同時也最耗時的環節。
確定設計主題
有些人討厭擬物化的風格,原因或許是,在數字化的界面上模擬真實世界中的元素,這很容易導致視覺上的過度設計,同時在交互方式上與現實中的規律有所出入。不過,如果能夠以謹慎合理的方式加以運用,擬物化依然是有用、有趣并且非常強大的設計風格。實際上,任何用到了按鈕元素的應用都包含了擬物化的風格在里面,因為按鈕這個概念本身就是從現實當中借鑒而來的。只要運用方式正確,擬物化風格所帶來的視覺引導性可以幫助用戶更好的理解應用的使用方法。
基于對這一點的認知,我們從一開始就明白,對于我們的離線翻譯應用來說,實體書籍的視覺隱喻性可以更有效的增強“詞典”的概念。
在確定設計主題的過程中,我們會瘋狂的在兩到三個主要界面上進行迭代試驗,直到我們確信它們看上去確實很適合我們的整個產品。
鑒于我們所尋求的是一種模仿書籍外觀的主題樣式,我們最終探索出一種很優美的自然色主題,使內容和文字得以突出。接下來的主題定義工作都是沿著這條路線來繼續的。
注:iOS7干掉了過去的很多擬物化的裝飾性UI,整個業界也自然會隨之進行調整,但好的設計師不會盲目的跟隨潮流。潮流確實很重要,但是我們仍然要結合產品的具體情況來考慮怎樣的風格才是最適用的。另外,隨著iOS7的到來,擬物化的UI風格看上去雖然可能有些落伍了,但在一兩年之后,多樣化的設計風格發展有可能會使iOS7的最小化設計美學變的不再那么新奇。
亮點在細節當中
隨著我們不斷的充實著不同的頁面,我們開始尋找能夠在細節當中愉悅用戶的機會,使我們的應用在使用當中變的更有意思。其中一部分工作是讓界面看上去更漂亮,但你同樣可以通過增加有趣的動畫效果或是令人莞爾一笑的文案來達到效果。
使用意想不到的方式來幫助用戶簡化操作、減少輸入量,也可以使用戶更加開心。通常,用戶可以通過點擊搜索欄來發起搜索,但要使用拇指點擊到界面頂部的搜索欄,終歸是一種相對費力的操作,所以我們允許用戶在界面上的任何位置右滑,直接進入搜索界面。
隨著用戶的輸入,界面會即時輸出相關的搜索建議及對應的翻譯,同時以高亮的聚光燈樣式突出展示用戶剛剛輸入的關鍵字。
那些需要翻譯發言內容或一大段文字的用戶通常需要快速發起很多單詞的查詢。我們發現,如果必須點擊搜索欄中的x按鈕才能清除之前的搜索關鍵詞,那么對于這種高頻次的使用需求來說會極大的破壞操作流程,而且相當累人;這個問題在iPhone5當中更加突出。
所以我們決定讓用戶在搜索界面中通過右滑操作來快速清空搜索關鍵詞。這樣整個流程就順暢多了:用戶輸入關鍵詞,直接在搜索建議中得到翻譯結果,然后右滑清空,繼續輸入單詞。幾秒鐘的時間就可以搞定。
這類細節當中的亮點所帶來的體驗升華,在我們進行實境測試時變得尤為明顯。
設計師與程序員:即時協作
千萬、千萬不要覺得你把UI稿和相關資源交給程序員以后,就可以高枕無憂的等著東西完美的做出來。設計師不僅需要全程持續參與,以確保設計方案被良好的還原,而且還要試著通過基于代碼的原型與真實用戶進行溝通,以便發現潛在問題,以及之前沒有想到的東西。我不管你在設計方面有多天才,基于高保真原型的測試和迭代工作一定要做。
測試工作可以暴露出你在設計過程中怎樣也無法想到會出現的那些問題,而且能幫你發現有哪些細節可以繼續雕琢,以便給用戶帶來更愉悅的體驗。出于這些原因,我如今會在初期的基于代碼的原型上做更多的測試和設計迭代。
在這個階段,變化的成本確實很高,但卻是極為需要的。
有良好設計意識的程序員同樣可以帶來不錯的點子。例如,我們曾經希望把詞條索引做的更棒一些。我的心智模型驅使我在瀏覽索引時加入放大鏡的效果,而Sonico的程序員Richard則提出了一個更好的方案:讓字母索引圍繞著你的手指進行放大。

手勢試驗
在我們著手編寫第一個實際原型的時候,Clear出現在了市場上。一款沒有按鈕,只有手勢操作的應用。無論是是否喜歡,它都做出了一個重要的設計聲明。我這輩子都沒見過這樣的最小化設計實踐。
Clear是一個美麗的事物,它激發我去思考能否通過更多的手勢操作來改善我們的Languages應用。
我的第一個試驗非常極端:創建一個完全基于手勢操作的界面。
我們用手勢代替掉了之前的按鈕。向一個方向掃屏可以進入搜索模式,向另外一個方向掃屏可以查看字母索引。
雖然很喜歡這種最小化的方案,但我們還是意識到必須教會用戶使用這些手勢才好。我們嘗試了幾種不同的方式。但做過一系列可用性測試之后,我們發現所有方案當中都存在一個主要的問題:我們最重要的功能,搜索,對用戶來說實在是不夠明顯。
所以,我們最終放棄了最小化的嘗試,仍然使用了按鈕和明顯的提示作為最終方案,不過我們也保留了手勢和其他一些在試驗當中使用過的操作方式。結果就是,最終產品對于初級用戶來說非常符合直覺,簡單易上手,而較為高級的手勢操作則給很多中、高級用戶帶來了更多方便。
測試
我們希望自己的產品在可用性、外觀和健壯性等方面能夠通過測試和驗證。我們經由以下這些方式來達成這樣的目標:
我們觀察了朋友、家人和陌生人是怎樣使用我們的原型的。這里的關鍵在于向他們提出恰當的目標任務,讓他們表達出他們是怎樣思考的,而且不要回答他們提出的關于如何操作的問題。仔細探尋他們為什么會對某些東西產生疑惑,為什么會卡在某些地方,然后讓他們自己去試著解決問題。要注意觀察他們那些代表著看困惑和沮喪的肢體動作。不僅要了解他們能否完成任務,而且要觀察他們在完成任務的過程中是否花費了很多力氣,是否產生了愉悅的體驗。
我們找到了一些高手來幫我們做review,這些高手包括蘋果的頂尖設計師、SxSW和WWDC當中的一些可用性專家及開發者。
我們把截屏發到Dribbble上,傾聽各路設計師的意見反饋。
我們親自使用TestFlight到真實的情境當中進行測試。
最后,我們徹頭徹尾的對功能方面的表現進行檢查,查詢了成百上千的單詞,去捕捉各種bug,確保應用的健壯性和精確性。
應用圖標
應用圖標意味著很多。它是多數用戶對于一款應用的第一印象,我們希望用戶看到我們的圖標之后就會產生想要把這個應用放到他們iPhone首屏上的念頭。
第一版設計方案就是一個簡單的字母“L”,代表Languages。簡潔明了,但是沒有什么信息溝通作用。
經過幾次頭腦風暴,我們嘗試了真實詞典的隱喻表現形式,畢竟我們的應用就是這方面的主題。圖標很漂亮,但我們無法讓它在很小的尺寸下也表現良好。另外蘋果的設計師也不建議我們使用書籍的樣式,容易給用戶產生誤導——我們的應用畢竟不是關于閱讀的。
瘋了。我們真的很喜歡這個圖標,但我們還是需要重新來過,設法找到一種能夠讓用戶立刻發現并理解的樣式。一個地球,還不壞,但最終我們還是選擇了帶有音標的“a”方案,因為這個樣式很獨特,而且可以展示出“外語”的含義。我們把這個圖標放在自己手機的首屏上,過了一段時間,覺得越來越有愛了。最終,經過時間的驗證,這款圖標勝出。
下一步:發布上線
我們就這樣一路走來,自己也學到了很多東西。
一年的汗水與淚水,產品最終成型。實際上,我們當初計劃放在1.0當中的一些功能最終沒有落實進去,但已有的功能確實是經過嚴格拋光和打磨的。到了該發布上線的時候了。請保持關注吧,接下來我們會在新的文章中和各位分享一下市場推廣和發布方面的經驗。(還沒決定是否要把譯文拿來做 -?譯者C7210)
?譯者:C7210
本文鏈接:http://www.casaleticia.com/the-story-of-the-ten-best-application-2.html
本文標簽: , , , , ,