這篇博文是25學堂的小編摘錄自網(wǎng)易UED的一篇關(guān)于ipad設(shè)計的總結(jié)。個人覺得分析的非常好。于是轉(zhuǎn)載部分過來跟25學堂的小伙伴們來分享。

我們來看看網(wǎng)易云閱讀ipad設(shè)計是如何來布局的？

iPad跟iphone等其他智能手機相比，展示空間要大的多，但是比pc端又小。一般情況下，我們都會為了充分利用ipad空間的優(yōu)勢，減少整屏切換，App往往采用更扁平化的層級結(jié)構(gòu)，所以首頁的交互設(shè)計就非常重要。

在這次的iPad版云閱讀中，我們增加了雜志分類、閱讀圈功能，豐富了個人主頁，原來的結(jié)構(gòu)已經(jīng)不能適合現(xiàn)在的需求。怎么樣讓用戶能便捷地找到入口，同時各個內(nèi)容得到很好的呈現(xiàn)？我們嘗試了不少iPad端常見的設(shè)計模式。同時，也告訴我們?nèi)绾螌⑦@3種iPad端常見的UI界面設(shè)計布局模式合理搭配應(yīng)用。

第一種：豎導(dǎo)航布局模式

把我、書籍、資訊、雜志、閱讀圈、消息作為獨立的tab，列在左邊，點擊tab切換右半部分的內(nèi)容。把操作類按鈕（如搜索、整理、離線下載、添加內(nèi)容）等放在頂部。與之相對應(yīng)的，在閱讀圈中采用單一視覺走向的列表流設(shè)計。

豎導(dǎo)航設(shè)計優(yōu)點是：

結(jié)構(gòu)邏輯清晰，操作效率高。在網(wǎng)易新聞、微博等iPad客戶端中采用的就是類似的結(jié)構(gòu)。

豎導(dǎo)航設(shè)計缺點是：

由于導(dǎo)航占據(jù)了屏幕邊上的一部分空間，右邊主要內(nèi)容的排布會受到影響，尤其在豎屏情況下；閱讀圈單屏顯示內(nèi)容有限，原來文章正文的版式會被打破，影響閱讀體驗，這與我們的初衷相背。

第二種：分屏平鋪 布局模式

在現(xiàn)有架構(gòu)的基礎(chǔ)上，主頁內(nèi)容包括書籍、資訊、雜志，采用頂部tab切換。點擊頂部兩端的相關(guān)入口，可以去往左面整屏閱讀圈、右面整屏資訊中心或書城。

分屏平鋪設(shè)計優(yōu)點：

每屏內(nèi)容相對獨立，劃分明確，在“多看”iPad舊版中也采用了類似的信息架構(gòu)設(shè)計。如果我們這樣設(shè)計，對現(xiàn)有首頁改動比較小，閱讀圈的設(shè)計也可以少一些限制。可以更好發(fā)揮我們在某些欄目的設(shè)計想象空間。

分屏平鋪設(shè)計缺點：

這種布局模式的架構(gòu)拓展性比較差，不夠靈活！如果未來想要加入更多的內(nèi)容分類，又要推倒重來。因為布局定死了。

第三種：Tab切換布局模式

?這是最基本最常見而且用的最多的一種ipad設(shè)計模式，考慮是不是要和手機端的信息架構(gòu)統(tǒng)一，我們一開始出了一個雙tab的方案，但通過快速的用戶測試和對iPad使用習慣的分析，這個方案很快的被否定了。

這是因為雖然都是IOS系統(tǒng)，但在iPhone上屏幕更小，用戶容易注意到底部內(nèi)容，底部也更易于單手操作。在iPad上，由于屏幕較大，用戶注意力集中在屏幕中心的內(nèi)容，底部易被忽略，在操作iPad時，底導(dǎo)還容易被遮擋、成為盲區(qū)。我們又進一步考慮了改進方案，把資訊、書籍、雜志、閱讀圈作為頂部導(dǎo)航 ，與我相關(guān)的操作和頁面入口收在一起放在界面右下角。通過tab來扁平化層級關(guān)系，把閱讀圈與其他內(nèi)容并列，我們把所有信息都鋪開呈現(xiàn)在你面前，就像一個承載信息流的容器，首頁變得更純粹了。

總之：我們的進行APP設(shè)計或者ipad設(shè)計的目標：以內(nèi)容為中心，引導(dǎo)讀者與讀者之間建立聯(lián)系。

明確了設(shè)計目標，要以怎么樣的形式來組織用戶分享的內(nèi)容呢？按照手機端的思路推到pad上，很容易聯(lián)想到類似微博的縱向單列表模式。但是這種方式一屏展現(xiàn)的內(nèi)容比較少，從信息流中打開單篇文章的方式也比較局限，會打破現(xiàn)有正文版式，不能很好滿足用戶深入閱讀的需求。

例如云閱讀是一個包含了書籍、資訊、雜志的綜合性產(chǎn)品，這使得我們的分享內(nèi)容比較多樣，而用戶互動、評論所生成的內(nèi)容也不固定。要在iPad的大屏幕上滿足多結(jié)構(gòu)信息流的表現(xiàn)，我們又想到了比較常見的瀑布流模式。但從快速的用戶驗證中可以發(fā)現(xiàn)。瀑布流的信息排布不規(guī)則，用戶的視線需要不斷跳躍，比較適合以圖片為主的分享。而在閱讀圈中，標題這類文字信息往往是用戶最關(guān)注的，間斷的視覺流讓人看起來比較累。

最終，閱讀圈采用了規(guī)則的卡片化設(shè)計。面對不固定的分享內(nèi)容，如何把它們呈現(xiàn)在統(tǒng)一高度的卡片里？我們設(shè)計了一種漸進式的處理方式：針對文章、源、書籍等多種分享內(nèi)容，定義了顯示優(yōu)先級，優(yōu)先顯示信息標題、轉(zhuǎn)發(fā)贊和最新評論，如果有多余空間，進一步顯示摘要或多圖。

以下是部分內(nèi)容的在ipad上的交互展示規(guī)則：

在視覺上，我們還做了不同的版式和對齊處理，讓每一種內(nèi)容的分享都看上去飽滿好看。這樣的設(shè)計，保證了不論信息流內(nèi)部怎么變化，它的外觀都是穩(wěn)定的。標題顯示在一條順暢的視覺流上，不同的內(nèi)容形成了一種賦予變化的節(jié)奏，讓閱讀圈的瀏覽體驗舒適而不枯燥。

如果在交互這塊不能比較良好的體現(xiàn)出用戶的閱讀習慣，有必要的時候需要做下任務(wù)流程的簡化和細化。這塊是APP設(shè)計師必須學習和提升自己能力的一方面。

有興趣的朋友可以看原文：

打造舒適的閱讀空間—云閱讀iPad3.0設(shè)計總結(jié)交互篇

原文地址：http://uedc.163.com/11672.html