移動產品設計之ios系統的導航

2022-05-03 07:00:11 字數 2019 閱讀 3801

做道題:[不定項選擇題]

os中導航設計模式有幾種?

a.平鋪導航

b.標籤導航

c.樹形導航

d.模態檢視導航

正確答案:a b c

講解:導航始終是產品設計的重頭戲,往往產品設計中90%的事情就是在做導航。在iphone中預置了3種可以直接使用的導航模式:平鋪列表、標籤頁、樹狀結構,每種模式都配有不同的工具欄和控制項。三種導航模式可以獨立使用也可以混搭,讓你的使用者可以優雅的穿行與你的應用之中。

平鋪列表

這種方式主要用於只有乙個主屏的簡單應用。這種方式很適合瀏覽並發現類的應用,因為他的資訊架構簡單到極致,沒有資訊層級也沒有組織結構,就像一疊卡片一樣。主要資訊在卡片的「正面」展示,「反面」就是簡單的設定,向左右滑動即可翻頁,典型應用比如內建的天氣應用。

當然,平鋪列表式導航也可以根據你的需要隨意的新增、刪除卡片。從某種意義上講,他的擴充套件性優於標籤頁式導航,因為標籤頁模式中類目與順序都是固定的。

在平鋪列表模式的頁面底部都新增了頁面分頁控制項,其表現為一排小圓點。小圓點的數量代表了平鋪的頁面的數量,而高亮的小點則是另外一種形式的導航, 他顯示了當前所在頁面的位置。同時,頁面分頁控制項也是可以操作的,點選控制項的左半部分或者右半部分或者直接左右滑動可以切換上乙個/下乙個頁面,不過,頁 面分頁控制項每次只能翻一頁,而不是直接跳轉到某一頁去。一般而言,頁面分頁以不超過10個為最優,超過了20個就會溢位螢幕了….

另外,為了更好的表達」卡片堆「的隱喻,最好不要在平鋪模式下設計多個不同的滑動手勢。在觸控螢幕上大家都能在單一方向上進行滾屏,但是2個方向的滾屏需要更好的精度,這種做法有些挑戰人機工程學了。

標籤頁

在ios上標籤頁一般依附在螢幕的底部,標籤欄將應用功能一一歸類,點選乙個標籤就會跳轉到相應的頁面上,然後該標籤以高亮的形式表明你當前的位置。在標籤頁模式下,每個標籤對應的頁面都可以有自己的介面風格和特定的內容與功能,看起來就像是在執行乙個獨立的應用。

標籤欄的高度是49畫素,每個按鈕都會包含乙個文字標籤和圖示,按鈕的寬度取決於放置按鈕的數量,標籤欄限制最多可以放5個圖示,超過之後會在第5個按鈕的位置出現」更多「的標籤。

當然,標籤欄以49畫素的高度存在其實占用了不少的螢幕空間,所以在某些情況下可以適當的去掉標籤欄,典型的就是圖書類應用的全屏閱讀模式。

樹狀結構

這種模式簡單來說就是將層級資訊分類到一棵倒置的樹枝上。這種導航模式很適合列表,點選列表中的一項可以看到新的列表,列表可以再進行分拆,直到進入專案的詳情。樹狀結構的乙個變形就是**檢視,也就是我們常說的」9宮格」,這種變形更加的圖形化。

當然,根據資訊的不同,樹狀模式中的標籤也可以進行分組。乙個樹狀模式可以分為若干的組,每個組可以包含任意數量的行數。

3類導航模式的比較

導航模式的組合應用

平鋪列表、標籤頁、樹狀結構3種導航模式並不是互斥的,完全可以在乙個應用裡對他們進行混搭。這種混搭可以幫助我們克服單個導航模式的短處。

模態檢視

我們經常會遇到在某個路徑中滑出乙個單屏、進行編輯、檢視資訊、操作介面的上的內容的情況發生。這是一種應用行為的特定形態,一般帶有流程的介面變 更的情況發生,比如一張頁面臨時取代了整個應用程式的顯示屏,我們稱這種處理方式為「模態檢視」。預設情況下,模式檢視從螢幕底部邊緣滑上來切一半覆蓋了 當前整個螢幕,模態檢視完成和程式主功能有關係的獨立任務,尤其適合於主功能介面中欠缺的多級子任務。這種操作會暫時繞開應用的正常操作。

模態檢視常常被用來編輯或新增內容,當你需要的時候模態檢視一般從螢幕底部滑出而後遮蓋先前的頁面,當你完成任務後滑出的頁面也會相應的縮回去,然 後可以繼續之前的流程。有些控制項和介面元素只在次要任務中被偶爾用到,模態檢視很好的把他們暫時隱藏了,並且當需要的時候出現,有效的節約了螢幕空間。

模態檢視有點像是導航中的死胡同,為了能夠讓使用者也可以同樣方便的回到正常的流程中去,模態檢視除了正常的操作之外一般還有加上乙個「完成」按鈕,或者「取消」按鈕。

最後,乙個移動產品設計的禮儀問題

移動產品設計隨記(二)

一 移動網際網路與傳統網際網路區別。傳統網際網路被人看做是工具,移動網際網路產品存在於手機中,被人每天攜帶,被人傾注感情。二 乙個功能流程留給使用者的操作時間上限為5分鐘,超過會使使用者感覺疲勞。三 等待介面不要超過3s,如果3s還沒有資料,那麼可以採用先將介面的框架顯示出來,文字載入優先的形式減少...

移動產品設計原則學習

移動產品設計所遵循的原則學習記錄 第一 可見原則 保證介面的內容可見 狀態可見 變化可見。看起來是特別基本的要求,但很多產品其實都做不到。使用者找不到資訊 不知道當前的情況 不明白發生了什麼,都是不符合可見原則的例子 第二 場景貼切原則 功能操作符合使用者的使用場景。第三 可控原則 第四 一致性 使...

移動產品設計書籍推薦

這是我曾經在知乎上對乙個問題的回答,最近也有好幾個朋友在公號裡向我提問,對於做移動產品設計,有沒有一些比較值得一讀的書來推薦。我把這個問題重新梳理了一下,更新到這裡。這是我曾經在知乎上對乙個問題的回答,最近也有好幾個朋友在公號裡向我提問,對於做移動產品設計,有沒有一些比較值得一讀的書來推薦。我把這個...