移動商務視覺設計1移動界面圖文排版——網店類2移動界面圖文排版——新聞類目錄

CONTENTS目錄

CONTENTS1新聞類閱讀APP2在理性的氛圍中閱覽新聞—央視新聞3在清爽的空間中快速獲取關鍵信息—360新聞移動界面圖文排版——新聞類目錄

CONTENTS4傳統真實的讀書空間—百閱5專為現代都是女性打造的時尚咨詢平臺—優家畫報6設計理念移動界面圖文排版——新聞類7設計規范標準1新聞閱讀APP新聞類閱讀APP避開生僻字01字體大小需適度02字號搭配需突出03調節色彩對比度04MarketsEXISITNGNEWNEWEXISITNG生僻字帶來的低識別度影響用戶的閱讀無字號的搭配文字信息顯示得單調不便于用戶對信息的接受過小的字體同樣阻礙了用戶的閱讀文字與背景間色彩對比過弱或過強都會引起用戶與閱讀的不適新聞閱讀APP2巧用分塊構成橫向排列帶來的穩定視覺以配色凸顯新聞的權威性在理性的氛圍中閱覽新聞—央視新聞巧用分塊構成頁面布局形式一：無形的分塊構成將界面中的信息編排成一個個獨立且棱角分明的塊狀區域，可在視覺上渲染一種嚴謹而理性的視覺氛圍，在這里我們將這種編排方式，稱之為分塊構成，用其來凸顯APP界面的理性氣質。頁面的黃色框區域是虛線，圖1和圖2都是無形的分塊區域頁面。圖1圖2巧用分塊構成頁面布局形式二：有形的分塊構成在處理這種布局時，設計者一般會借助其他元素（最為常見的編排元素為線框和色塊），在空置的版面中規劃出基本版面，而后將需要排列的元素放置在這些版面中。線框式有形分塊結構如圖3所示的央視新聞客戶端界面便采用了線框式的分塊構成，簡單明了，分區明確。如圖4所示央視新聞客戶端界面便采用了方框式的分塊構成在帶來規整感的同時也會平添幾分自由度。圖3圖4橫向排列帶來的穩定視覺移動商務在央視新聞客戶端的大部分界面中，設計者皆采用了一種橫向排列的構成方式來編排界面中的視覺要素，其目的是為了帶給界面一種平靜且穩定的視覺空間，而這種平靜與穩定感恰好是我們在塑造理性風格時所需要的。橫向排列就是將界面中的視覺要素，在水平方向上，進行橫向編排，圖5和圖6所示。圖5圖6以配色凸顯新聞的權威性在眾多色系中，提到理性情感的表達，藍系色彩應當是不二之選，除此之外，還可考慮與無色彩系進行搭配，其目的是在不改變理性基調的同時，豐富色彩層次。比如央視新聞客戶端界面呈現的就是藍系，很好的體現出此款APP的理性情感，如圖7和圖8所示。圖7圖83感受綠白間的清爽氣息標記符號帶來的提示作用在清爽的空間中快速獲取關鍵信息—360新聞感受綠白間的清爽氣息將明度較高的綠色和白色進行搭配，可營造出一種春風過境之感，讓用戶從心理上感到舒暢無比在綠白兩色的面積分配上，白色要遠遠大于綠色，其原因是因為白色更有利于凸顯黑色文字，同時白色不會影響豐富的新聞圖片從而給觀者造成視線的干擾新聞出處顯示新聞的重要性以及來源在360新聞界面設計中設計者添加了一些關鍵的新聞信息標記符號比如：最重要的新聞會采取置頂的方式，方便凸顯它的重要性顯示新聞的來源，體現新聞的真實性標記出時間，體現新聞的時效性傳統真實的讀書空間—百閱4木質材質的書架印象傳統紙質的背景仿真的翻頁效果木質材質的書架印象木質材質得到廣泛應用，木質材質可營造出一種傳統的書架印象，而這種印象可在一定程度上引發人們的共鳴，從而提升好感度。傳統紙張的背景復古羊皮紙泛黃的紙張為了貼合整個設計APP的視覺風格，設計者特意在閱讀界面的主題設定中，推出了兩款特色化的主題效果。一種是復古的羊皮紙，一種是泛黃的紙張效果，可以讓用戶感受到濃郁的讀書氛圍。仿真翻頁效果為了給用戶帶來更加真的閱讀體驗，設計者在對閱讀界面進行交互設計時，采用了仿真的翻頁效果設計，讓用戶可以從任意角度進行翻頁動作，從而感受到一種相對真實的讀書趣味。專為現代都是女性打造的時尚咨詢平臺—優家畫報5簡單配色展現都市女性特質感受自由型板面的時尚氣息特殊字體的選擇和運用簡單配色展現都市女性特質經典的黑白兩色，是表現當代女性獨立、自主特質的不二選擇，并且當小面積黑色出現在大面積的白色中時，還能體現出一種精致且高端的視覺效果。感受自由型板面的時尚氣息在版式設計中，存在這樣的版面類型，沒有既定的框架沒有固定的編排準則，更多的是根據設計者對形式的美感把控，在版面中的視覺要素進行自由編排，這就稱之為自由行版面。目的是讓用戶一開始就感受到一種來自于自由行版面的時尚氣息與隨性之美特殊字體的選擇與運用從都市女性的特質出發--棱角分明的字體結構，能表現出都市女性的自主個性，纖細而狹長的筆畫構成，十分貼合許多時尚女性給人的高挑印象。從資訊本身出發—在如上所示字體樣式所對應的界面中，陳列了相關的品牌服飾，為了凸顯不同的服裝品牌，彰顯自己的服裝氣質，設計者會放置不同的品牌字體樣式。設計理念6流程化通用設計簡化設計工作量維護視覺繼承和統一更專注于用戶體驗推進產品持續進化更專注于用戶體驗建立設計秩序，流程化通用設計簡化設計工作量，提升效率維護視覺繼承與統一更注重于用戶體驗推進產品持續進化設計標準的建立是在產品不斷的迭代過程中沉淀積累，最終形成的一套優秀的設計方案在規范設計標準時候能夠更加深入的思考為何要這樣做而不是那樣做能夠在沉淀優秀設計的同時持續的創新，推進產品進化同時建立起來產品團隊各部門之間的信任溝通和認可設計標準規范7如何制定設計規范標準設計規范標準包括的元素如何制定設計規范標準自我產品層面加深對公司產品，業務目標的認識總結過往版本的不足，同時完善已有的模式迭代中創造出更優秀深度結合用戶目標和使用場景如何制定設計規范標準外部層面理解移動互聯網的設計趨勢參考先進競品，聽取用戶反饋意見制作出合理的且可用的模板和組件總結市面優秀產品通用設計樣式設計規范包括的元素導航定義各級導航的視覺風格及交互方式，特別是對于那些具有層級關系的導航項來說，要完整的展示出嵌套關系及展示方式鏈接和按鈕定義鏈接和按鈕的視覺風格，為不同模板中的鏈接以及不同類型表單中的按鈕提供色值、樣式。大小、位置、及圖例視覺繼承定義頁頭、標題、段落、圖片等元素是怎樣在視覺上保持關聯性的，提供必要的圖例，并通過文字描述出視覺繼承關系對于整個產品的外觀氣質的影響作用頁面布局定義不同的區塊和元素在界面當中位置、彼此之間的關系；對于那些在全局范圍內普遍適用的外間距、內邊距、版塊間隔、網絡模式等規則作以說明圖片與圖標對內容和界面元素當中的圖片及圖標進行定義，包括文件類型、尺寸、文件大小、比例、風格等方面。設計規范包括的元素UI標準表單和驗證定義不同的UI元素所對應的交互模式，以及