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

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

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

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

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

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

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

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

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

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

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

在現(xiàn)有架構(gòu)的基礎(chǔ)上，主頁(yè)內(nèi)容包括書(shū)籍、資訊、雜志，采用頂部tab切換。點(diǎn)擊頂部?jī)啥说南嚓P(guān)入口，可以去往左面整屏閱讀圈、右面整屏資訊中心或書(shū)城。

分屏平鋪設(shè)計(jì)優(yōu)點(diǎn)：

每屏內(nèi)容相對(duì)獨(dú)立，劃分明確，在“多看”iPad舊版中也采用了類似的信息架構(gòu)設(shè)計(jì)。如果我們這樣設(shè)計(jì)，對(duì)現(xiàn)有首頁(yè)改動(dòng)比較小，閱讀圈的設(shè)計(jì)也可以少一些限制?？梢愿冒l(fā)揮我們?cè)谀承谀康脑O(shè)計(jì)想象空間。

分屏平鋪設(shè)計(jì)缺點(diǎn)：

這種布局模式的架構(gòu)拓展性比較差，不夠靈活！如果未來(lái)想要加入更多的內(nèi)容分類，又要推倒重來(lái)。因?yàn)椴季侄ㄋ懒恕?

第三種：Tab切換布局模式

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

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

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

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

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

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

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

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

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

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

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

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