劉夢飛 張鈺 徐思宇
摘要:在科技發(fā)達的現(xiàn)代生活里,移動終端設備無時無刻都圍繞在我們身邊,便攜的智能手機、平板電腦等改變著我們的生活。在使用過程中,實現(xiàn)人與設備連接的橋梁就是交互行為或者說交互設計,而導航則是交互中的重頭戲,是受眾在移動終端設備中獲取所需的通道。在不同類型的應用程序中,都有不同的符合其內(nèi)容的導航模式。比如說:閱讀類應用多采用隱藏導航,搜索類應用或瀏覽類客戶端多采用標簽頁模式的導航,每種導航都有其獨特的魅力和價值,它是根據(jù)其內(nèi)容應運而生的。所以在眾多終端設計導航占著至高的位置,一個簡單易操作的號航可以帶來更多的用戶。
關鍵詞:IOS系統(tǒng) 移動終端產(chǎn)品 應用程序 導航設計
伴隨著科技的發(fā)展和計算機硬件技術的更新,以蘋果和安卓為主流的智能手機、平板電腦等移動終端設備逐漸走進人們的視線改變著人類的生活。在信息爆炸的時代,人們通過這些移動的設備去獲取海量的信息,不可否認移動終端成為了傳遞人與科技的一條橋梁。在眾多基于移動設備的運用程序中如何去設計一款適合消費群體的交互應用程序是檢驗交互設計成功的關鍵。在設計的過程中,面臨著內(nèi)容信息的多樣性,交互的模式也呈現(xiàn)著不同的變化。本文以傳統(tǒng)的移動交互模式為契機,研究和分析在不同的內(nèi)容信息條件下,設計符合功能性要求的交互模式,并通過具體的案例分析對導航交互設計進行研究。
一、前期選題制定和準備
傳統(tǒng)的導航模式主要有三種:平鋪列表、樹狀結構和標簽頁。這幾種導航模式大部分普及及應用所有的app。在前期的選題中,我們根據(jù)目前手機市場的產(chǎn)品多樣化及用戶心理進行分析,通過手機屏幕的尺寸大小從而重新設計導航模式,在蘋果公司產(chǎn)品中Assistive Touch被廣大用戶所青睞,方便快捷的導航模式代替任何功能鍵。由此,我們根據(jù)目前App設計中的幾種傳統(tǒng)導航模式和Assistive Touch相結合進行設計,取其精華。給用戶一個全新的導航模式及概念。每一個設計師要根據(jù)當下的產(chǎn)品樣式與市場分析來發(fā)散思維改變傳統(tǒng)產(chǎn)品模式。
在IOS系統(tǒng)下的移動終端設備應用中,傳統(tǒng)的導航模式主要有三種,分別是平鋪列表、樹狀結構和標簽頁。
1.平鋪頁面
平鋪頁面,顧名思義就是一張或者一疊紙片,平鋪展示給用戶,用戶通過左右拂動來切換不同的頁面,它適用于沒有信息層級,沒有組織架構,且每個頁面的界面類型一致的應用,一般在短小精煉的功能工具性應用較為常見。平鋪列表式這種方式主要用于只有一個主屏的簡單應用。這類應用的信息架構簡單,并沒有沒有復雜的信息層級和組織結構。例如我們最常用的IOS自帶的天氣應用主要信息在屏幕上展示,細節(jié)信息就是簡單的推拉進行查看,向左右滑動即可翻頁選擇不同的城市。當然,平鋪列表式導航的另一好處是用戶可以根據(jù)需要隨意的添加、刪除卡片。平鋪列表更自由,用戶有更多選擇。如果為了更好的實現(xiàn)這種左右滑動切換頁面的模式,最好不要在平鋪模式下設計多個不同的滑動手勢,避免混淆。
2.tab標簽欄
這種類型的導航模式最為常見,它將界面最下方的區(qū)域作為導航區(qū),通過tab標簽的形式劃分為3至5個標簽,每個標簽對應不同功能。這種模型適合功能精煉層級較少且需要頻繁切換功能的應用;它的優(yōu)點在于可以直接將最核心的tab界面最為默認選中狀態(tài),用戶打開應用時便直接呈現(xiàn)出用戶最關心的信息內(nèi)容,比如社交應用的信息流,郵件應用的收件列表等;同時,用戶可以在大部分頁面中直接切換tab標簽而輕松跳轉頁面,并清晰告訴用戶該應用的主要功能以及當前所在功能;缺點在于tab標簽數(shù)量有限,IOS HIG建議不超過5個標簽,如有超過的功能菜單則統(tǒng)一放在“更多”標簽中;同時,該標簽占據(jù)50px高度的區(qū)域,且在大部分界面中始終存在,占據(jù)著10%的信息展現(xiàn)區(qū)域。
3.樹形列表
樹形列表形式的導航模型在郵件系統(tǒng)比較常見,它將每一級別的功能通過list列表形式展現(xiàn),點擊之后展開下一級的lis列表,如此類推直到最終的功能展現(xiàn)界面。這種導航模型的優(yōu)勢在于可擴展性大,能應對具有大量的類別、功能和項目的應用,比如購物分類等,這種list的組織形式Eweb中比較常見,用戶容易理解,并且可滿足用戶自定義列表的需要,比如對列表進行新增、刪除、排序等,微信的應用插件模式也采用了列表來展現(xiàn)。樹形列表的缺點在于層級深,父級的所有其它列表在子列表中不可見,必須要返回到上一級,來回返回比較麻煩,往往從一個子功能切換到另一個子功能時需要在漫漫路途上“奔波”。
二、用戶調(diào)研及市場分析
iPad中的電子雜志中,尤其是時尚類的奢華的電子雜志,像諸如一些CHANEL,Gucci或者BMW這樣的精致的奢侈品類,會更突出其內(nèi)容中產(chǎn)品的高清圖片,讓用戶更加體驗到其產(chǎn)品的精細和奢華,一般都會使用隱形的導航欄模式,就是在觸控屏幕是彈出導航欄,在點擊之后導航欄會隱藏起來,這樣用戶可以在這個屏幕觀賞其內(nèi)容,這一點和QQ閱讀等閱讀類軟件所采用的導航模式相似??v觀整個QQ閱讀的導航設計,它并沒有像微博客戶端或一些瀏覽器客戶端一樣直接運用標簽頁形式的導航模式,而是將其隱藏起來,當用戶觸控移動設備屏幕后它才會出現(xiàn),再次點擊后又會隱藏起來,這樣真正實現(xiàn)了閱讀文字的全屏化,使用戶的閱讀文字面積達到最大化,辨識度也被提高。在選題之后通過作品分析及用戶調(diào)研進行設計,當前各種玲瑯滿目的App無論是社交軟件、閱讀應用、少兒應用等大都運用了目前傳統(tǒng)導航模式:平鋪模式、列表模式、側邊欄等。通過其他產(chǎn)品的分析,我們所設計的這款應用根據(jù)產(chǎn)品屏幕的尺寸和用戶心理來由此設計,在幾項調(diào)查問卷中所了解到了大多數(shù)人們在對手機界面中觸控范圍上的限制及不便有很大困擾,因此我們這款導航模式是有必要在各類產(chǎn)品中展示的,來改變用戶傳統(tǒng)導航模式的概念。
三、作品設計
在作品設計中我們確定了設計課件的整體風格為簡約、時尚。通過實物去研究紋樣,了解紋樣后用紋樣裝點生活。首屆以類似展廊的形式移動,受眾可根據(jù)興趣進行選擇了解(見圖一)。并隱藏傳統(tǒng)導航,整個界面的移動展廊就是導航。從多媒體教學軟件的開發(fā)流程中,我們不難看出:教學設計是開發(fā)的基礎,對多媒體教學軟件的設計起著一定的理論指導作用。在首頁我們?yōu)榱擞脩舴奖闶褂?,把導航設計成平鋪導航,用戶可直觀地選擇紋樣類型,簡單明了(見圖二)App系統(tǒng)主要詳細介紹了中國傳統(tǒng)吉祥紋樣的歷史發(fā)展、不同種類、常見圖案組合與古今用途。吉祥紋樣是以含蓄、諧音等曲折手法,組成具有一定吉祥寓意的裝飾紋樣,表達了“富、貴、壽、喜”(見圖三);并以“富貴壽喜”作為二級界面導航,觸碰時的動畫可帶給用戶一種互動感。同時在左側隱藏的搜索條中還能分別依照紋樣種類、用途與個人喜好三種形式讓受眾直接找到自己想了解的內(nèi)容(見圖四)。導航的多樣性更便于用戶依照個人的習慣,準確和便利的搜索出用戶想要了解的內(nèi)容。而導航的不規(guī)則圖形更加突出了作品的主題,以“萬字紋”的紋形導航來排列紋樣供用戶選擇,是我們這作品的新穎和創(chuàng)意之處。并不是以單一的橫豎列表來表現(xiàn)導航,導航并不只是為了達到切換內(nèi)容的目的,也同樣是作品設計中的點睛之處。因為隱形導航的最大問題就是它的導航模式是隱藏起來的,那么必須有教程或提示用戶如何使用這些功能,當用戶第—次使用此款應用時要有明確的標注及使用方法,以免用戶操作不便。
隨著path出現(xiàn),左側導航可以說脫離了傳統(tǒng)的ios交互結構,這種新穎的導航模型也越來越受到大家的青睞??梢哉f左側導航是集眾家之所長,取其精華去其糟粕,具有無限的功能拓展『生,可實現(xiàn)用戶自定義;界面邏輯清晰,物理層次明了;不喧賓奪主,卻又給人留下深刻印象。
由于目前各類移動終端產(chǎn)品屏幕尺寸越來越大,所以這就增加了用戶使用難度,一個手指很難觸摸到屏幕上的各個角落。通過大量的用戶體驗測試中我們得到了一個答案,在用戶使用中,手機屏幕左上角是用戶很難操控區(qū)域,其次是屏幕右下角,所以我們設計師在設計時要考慮這兩個問題,避免更多的信息量或導航放在這兩個區(qū)域,一個好的產(chǎn)品不僅僅時頁面風格炫麗就可以吸引用戶,更多的是從用戶心理出發(fā)設計交互,怎樣能更方便的把產(chǎn)品內(nèi)容展示給用戶。我們通過以上的結論中設計了一款隱藏導航。在用ios系統(tǒng)的用戶可能都知道在設置里面有—項功能叫AssistiveTouch,我們打開之后它可以代替手機上的一些按鈕鍵,方便易操作。通過ios的這個交互設計我們想以此把它改變成產(chǎn)品導航的形式,但是它不會固定的在某一個位置,是處于隱藏的狀態(tài),比如當我們在看—本書的時候,我們把所有的導航都隱藏,整個頁面只展示書架或者讀書文字,當用戶想調(diào)節(jié)讀書模式,可以雙擊屏幕兩次,此時頁面會彈出來一個圓圈導航在屏幕中間,以此來操作改變讀書模式,這樣用戶在使用的時候就不會考慮環(huán)境因素,在擠地鐵等環(huán)境下可以單手操作,不會因屏幕過大觸控不到導航而使用兩雙手。怕避免導航頻繁的彈出,因此我們設計只有用戶在雙擊屏幕的情況下才方可使用。
當然,隱形導航的最大問題就是它的導航模式是隱藏起來的,那么必須有教程或提示用戶如何使用這些功能,一般這種提示只出現(xiàn)在軟件第—次使用時。這些提示尤為重要,當用戶看著全屏的文字找不到返回時,可能就會很失望了嘗試無果后可能就會直接卸載應用程序,用戶如何知道該如何使用導航,應用應該如何引導受眾去操作?這個問題設計師應該思考的,要遵從避免沖突,前后、左右,全局統(tǒng)一。
App導航設計需要在明確了設計的總體框架和結構后,根據(jù)硬件的特點和用戶的使用習慣進行設計。通過理性的架構分析,感性的體驗設計,好的導航結構能讓你的App設計事半功倍。