|
CNN新聞網(wǎng)站前段時間改版了。非著名設(shè)計顧問 andy 通過對比 CNN.com 和 USAToday.com ，談了些自己的想法，其中不乏一些好的見解。根據(jù)本人的理解，將其中一些有用的信息做了翻譯并記錄如下：
安靜的結(jié)構(gòu)
在設(shè)計以內(nèi)容為主的新聞類網(wǎng)站時，應(yīng)該運用干凈的結(jié)構(gòu)和清晰的元素組合。直觀地呈現(xiàn)信息是一個在線新聞?wù)军c的根本需求，為滿足這種需求甚至可以犧牲一些界面視覺。
外框、線條、顏色等都是結(jié)構(gòu)的基本元素，將這些元素舒服的排列會給頁面帶來節(jié)奏感和連貫性。并大大地加強和突出內(nèi)容，將內(nèi)容清晰的呈現(xiàn)給用戶。
CNN的改版設(shè)計就是如此，它的信息架構(gòu)干凈、清晰，我將它稱之為安靜的結(jié)構(gòu)。當(dāng)網(wǎng)站的內(nèi)容為王，而你又想鼓勵用戶花時間將內(nèi)容讀入大腦而不只是盯著它的時候。安靜的結(jié)構(gòu)在這個時候可以幫助你。
創(chuàng)建一個安靜的結(jié)構(gòu)成本其實很低，并且有很多方法。這篇文章會涉及到其中一部分。我將展示如何將它們進行有效的結(jié)合，增強設(shè)計效果。
兩個頁面的設(shè)計
粗略看一看CNN.com的主頁，再看看USA Today的主頁。你會發(fā)現(xiàn)USA Today設(shè)計得也不是太差。通過比較，你就會發(fā)現(xiàn)USA Today在內(nèi)容表達上其實存在著一些混亂。
為何會產(chǎn)生這種情況? 我們通過比較一些細節(jié)來分析。
首先，我們比較下兩個站點的頂部設(shè)計。 CNN非常簡單，并且只有一個目標: 導(dǎo)航/搜索。相反, USA Today的頂部稍顯忙碌，它想要用戶完成至少3種不相關(guān)的任務(wù)。通過頂部的設(shè)計，就初顯兩個站點截然不同的設(shè)計風(fēng)格。
焦點明確：導(dǎo)航/搜索。
焦點分散，效率變低。
雖然能找到導(dǎo)航/搜索，但是評論內(nèi)容、邀請成為會員、登錄提示都以同等程度的重要性來展現(xiàn)。
但是頁面是否干凈和清楚，區(qū)別體現(xiàn)在整個版面上，頂部并不會破壞網(wǎng)頁的完整性。因此要建立安靜的結(jié)構(gòu)，還需要從具體的版面上入手。
例如：USA Today不太注意圖/文結(jié)合時的配對排列方式，一些是水平配對，一些是垂直配對。雖然這不能稱之為一個問題，但是每一種排列方式都有適合它出現(xiàn)的位置。不搞清楚這個狀況，會惡化版面，造成內(nèi)容展示的損傷。具體到下面的圖片：
通過比較可以得出，CNN在展示圖/文配對上具有較高的一致性。這種一致性，在其內(nèi)容和結(jié)構(gòu)元素的展現(xiàn)方面也可看出。因為這種一致性的結(jié)合，CNN的表達較USA Today來說更為清楚。
出處：子條，設(shè)計中的戰(zhàn)斗機
責(zé)任編輯：moby
上一頁 下一頁 安靜的結(jié)構(gòu):控制頁面的視覺"分貝" [2]
|
第 1 頁 安靜的結(jié)構(gòu):控制頁面的視覺"分貝" [1]
第 2 頁 
