<xmp id="e0gg0">
  • <nav id="e0gg0"><strong id="e0gg0"></strong></nav>
    <nav id="e0gg0"><strong id="e0gg0"></strong></nav>
    <menu id="e0gg0"></menu>

    6.6.3 應用的細節

    為了能夠在X公司的iPhone應用中實現更加合理的內容瀏覽機制,你決定首先從他們的桌面應用入手,進行更加細致的分析。經過一番實際的使用,你發現,在桌面應用當中,內容被劃分為十個主類別,其中每個類別之下都有十個左右的子類,而每一個子類當中又包含著若干獨立的內容對象。整個系統當中大約有幾千個內容節點。

    桌面應用中的交互模型是很容易理解的。它會向用戶呈現一個網格狀的選項列表,其中每個單元格都對應著一個內容主類別。選擇了其中的某個主類之后,整個列表會被刷新,這個主類所包含的子類會依次填充到每個單元格當中。繼續選擇其中的某個子類,整個列表會再次刷新,并且被這個子類所對應的內容對象重新填充。這些內容對象通??梢蕴顫M多個界面,你可以不同的界面中切換瀏覽。

    另外,這款桌面應用在導航方面做的不是很理想。用戶必須至少進入到子類列表界面之后才能發現一個所謂的全局導航,而且當你深入到內容層面之后,會發現這個導航只能幫你回到頂級的主類列表界面。另外,在內容層面當中缺乏必要的上下文指示,用戶很難發現當前的內容對象從屬于哪個子類。

    在你對這些流程進行實際體驗的時候,要記得將自己的觀察和想法及時地記錄下來。這些記錄也許會對交互模型的創建起到重要的指導作用。正像我們在列表模型改造練習當中了解到的,某些在表面看來無關緊要的零星想法,卻有可能被擴展成為很有價值的交互概念。在某些情況下,你完全可以將那些從觀察記錄里歸納出的想法加入到交互模型文檔當中。

    根據當前案例的實際情況,你有針對性地在內容層級結構這方面做了特別的記錄與分析;這些信息將對交互模型的構建方案產生決定性的影響。目前,我們對于內容結構的理解大致是這樣的(見圖 6-15):

    《iOS Wow Factor》全書譯文精選

    圖 6-15 X公司桌面應用當中的內容結構

    桌面應用的交互模型當中有一個很嚴重的問題。正如我們在前文當中了解到的,當用戶處于內容層面的時候,必須首先通過全局導航回到主類列表界面,才能再次進入子類列表界面或是某個子類當中的內容對象列表界面。而這只是眾多問題當中的一個。你現在還不清楚桌面應用當中的這種網狀模型能否適用于iPhone的用戶體驗模式。

    既然我們已經在之前的練習中打造過一個網狀模型,那么不妨試著對這個概念進行再利用,并且將我們先前定義好的交互機制運用到當前案例的信息結構當中。(見圖 6-16)。

    《iOS Wow Factor》全書譯文精選

    圖 6-16 在網狀模型中,從主類列表界面導航至子類列表界面

    由于具有幾乎相同的網格結構,這個交互模型與X公司的桌面應用在體驗方面是具有很大相似之處的。對于那些已經熟悉了桌面應用的用戶來說,這是好事。不過畢竟,這種模型在小屏幕設備當中受到的空間局限還是很大的。在iPhone當中,我們最多只能使用3行3列的網格,而在桌面應用中,網格可以達到10行15列,具體的列數還會隨著顯示器的規格不同而變化。

    正像我們之前在模型改造練習當中定義過的,用戶可以通過雙指張開的方式展開網格單元,也可以直接點擊單元格進入下層結構。不過在當前的案例中,我們要降低第一種方式當中的那個狀態閥值,使系統在接收到雙指張開的手勢之后,能夠立刻將單元格進行擴展,直至全屏狀態。

    這個交互過程中的關鍵要素就是單元格在展開時所表現出的過渡動畫效果。我們希望給用戶帶來一種感覺,仿佛每一層界面都是嵌套在上一層界面當中的一個網格單元里的;當用戶使用雙指對某個單元格進行展開操作的時候,可以看到下層界面正在從格子當中呈現出來,并隨著單元格的擴展而填滿全屏。這種視覺交互效果可以準確地體現出這款應用的信息組織方式,而且對用戶來說,這種交互模式也是非常直觀的。

    遺憾的是,這個模型當中還存在一些弊端,例如回到上層結構的導航方式問題。使用相反的操作手勢,也就是雙指捏合的方式進行回退操作是具有一定的可行性的,但是對于內容較為復雜的界面來說,這種交互方式的視覺效果缺乏干凈利落的感覺。所以,網格模型的概念也許可以在某些特定的需求當中發揮其真正的潛力,但它似乎不適合當前案例中的應用??梢哉f,這種交互模型的擴展性并不是很強,我們無法將它很好地運用到一些常見的需求當中。

    另外,這個交互模型是一種典型的雙手解決方案,用戶必須一手持機,同時使用另外一只手進行相關操作。這種交互方式本身談不上不好,但是考慮到最終產品所處的移動上下文環境,這并不是一個很理想的模式。

    對于當前的案例,有沒有其他更加適用的交互模型呢?讓我們回過頭來重新思考一下常規列表的可能性。傳統的單列縱向列表非常便于單手操作,而且很適合用來展現層級化的信息結構。這種特性幾乎使其成為了iPhone當中最具普遍適用性的導航方案。不過也正是因為它的適用性太強,所以通過這種方式打造的交互方案通常會缺乏足夠的創新性。有什么辦法可以幫助我們以全新的方式來使用傳統的列表模型呢?

    在之前的練習中,我們曾經對單列縱向列表進行過天馬行空般的改造,這次,我們不妨在保持標準列表原貌的基礎上尋求一些局部當中的改進方法。在實際產品中,我們不能僅僅為了標新立異而刻意吹捧差異化的原則,尤其是不能在還有相關問題沒有得到解決的情況下片面地采用并不適宜的方案。在當前的案例中,網格模型不能很好地幫助用戶實現回退方面的導航功能,而且不便于單手操作。另外,正像我們在前文當中提到的,目前的桌面應用當中還存在著其他方面的問題,例如在內容層面當中缺乏必要的上下文指示,用戶很難發現當前的內容對象從屬于哪個子類,而且當你深入到內容層面之后,只能通過現有的導航機制回到頂級的主類列表界面等等。接下來,我們將致力于打造一個能夠解決所有這些問題的新模型。

    《iOS Wow Factor》全書譯文精選

    圖 6-17 擁有獨特交互方式的傳統單列縱向列表。用戶可以在某個列表項中向左輕掃,使原本處于隱藏狀態的二級列表結構呈現在這個列表項當中。

    這個解決方案第一眼看上去很普通,也很容易理解,它似乎就是一個內容類別列表。然而這個模型在很多方面都與iOS當中的標準列表有所區別。用戶在前兩層信息結構當中進行導航操作的時候,整個列表的視圖模式是不會發生變化的。當用戶選擇了某個主類之后,對應的子類列表會直接出現在這個主類所在的列表項當中。這個過程所涉及到的狀態變化只會發生在當前列表項的可視區域里。用戶可以在這個列表項區域當中通過上下滾動的方式來瀏覽子類列表,而當前區域以外的部分則始終保持不變,也就是說,用戶無需離開當前界面就能隨時訪問其他主類當中的子級分類。

    我們可以讓用戶通過向左輕掃的方式將子類列表“拖入”主類所在的列表項可視區域當中,也可以讓他們對某個其他位置上的目標對象進行相關操作,來觸發某種動畫效果,使子類列表移入可視區域。你可以對各種方式進行構思和嘗試,并從中找到一種操作體驗最自然的、誤操作幾率最低的來加以使用。

    這種交互模型在導航和瀏覽方面的效率很高,用戶可以在同一個界面當中同時查看兩個層面的信息。不過這里同樣存在一些很明顯的問題,例如子類列表會被局限在一個非常有限的可視區域當中,用戶一次最多能完整看到一到兩個條目。另外,這種模式本身只支持兩個類別層面之間的導航,要查看最終的內容對象,我們還需要使用另外一個模型將內容完整的呈現在屏幕當中。所以,這種模式也難以很好地適用于當前的案例。

    我們希望找到一種新的方式,它即可以沿用上面這種模型在導航方面的靈活性,同時又能使內容具有更好的可讀性。另外,在上面的模型當中,主類條目的表現形式以及對有效空間的占用率也可以得到適當的優化。需要記住,這款應用的核心需求當中要求我們提供一種快速高效的機制,以幫助用戶更好的瀏覽內容。我們對于交互模式的思考必須圍繞著這個中心思想進行展開。

    我們繼續在列表的概念上做文章,不過這次,我們可以試著為列表增加一些不同的屬性,使閱讀方式更具流動性。如下圖所示,這種模型當中不存在彼此分離的視圖狀態變化,它是一種連貫的、更具動態化的解決方案,而且對用戶的交互行為具有更好的響應性。

    《iOS Wow Factor》全書譯文精選

    圖 6-18 該模型將主類與子類列表整合到同一個層面中,使瀏覽更加迅速。用戶可以通過縱向滾動來瀏覽主類列表,在某個主類當中通過橫向滾動來瀏覽子類列表。

    這個交互模型與之前的那些有所不同。初始狀態下,界面為導航結構和其他功能保留了一定的空間。說到這款應用當中的其他功能,我們并沒有進行過相關的描述,因為對于當前的案例練習來說,那些細節問題并不重要,我們的主要目的是站在一個較高的層面上,構筑整個產品的核心體驗模式。所以目前,我們只需要將注意力放在與內容的導航與瀏覽相關的交互模型上就可以了,因為這些方面才是整個產品的基礎與核心。

    最初,這個模型只會呈現出一部分主類導航項。每個主類都以文字標簽的形式出現,用戶無需任何操作即可直接獲得子類列表當中的分類信息。這種二維導航結構可以幫助用戶以非線型的方式在同一個層面中瀏覽原本屬于不同層面的信息。

    要查看更多的主類以及它們對應的子類列表,用戶只需執行縱向滾屏操作。當主類列表接觸到屏幕的上邊緣時,排在最前面的幾個主類條目就會自動收起,以便為后面的留出顯示空間。在這個過程中,用戶不需要進行任何控制,縱向滾屏這個操作本身就會觸發這種類似手風琴風箱折疊一樣的效果。

    要查看某個子類當中所包含的內容對象也是很容易的。當用戶在默認視圖中選擇了某個子類時,界面會過渡成為一個新的網格內容模型,這個模型即可以像默認視圖那樣對內容進行分類呈現,同時也支持沒有文字標簽的單列網格單元(見圖 6-19)。要查看某個內容對象,用戶只需要點擊橫向列表當中的某個單元格,內容對象就會擴展至全屏。

    《iOS Wow Factor》全書譯文精選

    圖 6-19 子類列表視圖。在橫向的內容對象列表當中點擊某個單元格,內容對象就會擴展至全屏。

    在這個模型當中,我們可以將用于回退的導航控制元素放在界面頂部。這個控制元素既可以是一個簡單的返回按鈕,也可以是相對復雜的類似面包屑的形式。最重要的是,相比于之前的幾個模型,這次我們終于能夠以一種比較合理的方式來實現導航控制機制了。

    可以說,這是到目前為止我們能夠找到的最佳解決方案了。你可以將這套方案落實在交互文檔當中,并直接通過這個文檔向X公司的相關決策人員及團隊做以講解,引導他們站在用戶的角度去理解這款模型的出色之處。從這個交互模型當中,他們也能很直觀地體會到這款應用與競爭對手的產品相比所具有的創新性。你完全不用花費時間去打造線框原型、視覺稿或是高保真原型來完成這項工作。

    對交互模型的創建過程進行了完整的了解之后,你還可以沿用在這個案例當中學到的方法,繼續通過其他產品概念進行練習和嘗試,看看能否從中得到一些新的感悟。

    啊灬啊灬啊灬快灬片免费
    <xmp id="e0gg0">
  • <nav id="e0gg0"><strong id="e0gg0"></strong></nav>
    <nav id="e0gg0"><strong id="e0gg0"></strong></nav>
    <menu id="e0gg0"></menu>