從框架到內(nèi)容 京東關(guān)于落實設(shè)計的總結(jié)分享

本文轉(zhuǎn)載自京東設(shè)計中心JDC 

作者：美霞

前言

頻道頁的交互設(shè)計，通常會拆分為下幾個步驟，本文主要探討落實設(shè)計的環(huán)節(jié)。

落實設(shè)計，即是在經(jīng)過需求分析、方向定位之后，輸出最終交互稿件的過程。對項目的分析思考、邏輯的梳理整合能力無疑是一個交互設(shè)計師的核心技能，而落實設(shè)計的能力在我看來，應(yīng)該是設(shè)計師的基本功夫。前期分析定位需要有理有據(jù)，同樣，在落實設(shè)計這一步上，也需要思考周全、反復(fù)打磨。雖然最終稿件的輸出因人而異，但在框架到內(nèi)容的過程里，也有一些方法和思路可以幫助我們提高效率，規(guī)避不必要的錯誤。以下是我在落實設(shè)計的一些步驟和方法總結(jié)。

壹 | 寫在最前：內(nèi)容填充一定是基于分析框架之上的

這一點準確來說，是貫穿整個輸出過程中的。需求分析的結(jié)論和推導出的方向定位，并不單單是用來跟需求方溝通的，更是整個輸出設(shè)計過程中的核心標桿。后續(xù)頁面設(shè)計涉及的模塊比重、整體調(diào)性等都是需要圍繞前期分析的定位框架。

貳 | 整合信息

信息整合是著手設(shè)計的第一步，面對多樣的信息，我們可以從以下三個方面去整理。

1、信息元素

在前期的分析階段，我們只會確立到模塊的運營維度，到落實設(shè)計這一步，我們則需要清楚了解模塊內(nèi)展示的信息元素。在實際的項目設(shè)計中，需求方可能會向我們提供要展示的信息，但交互設(shè)計師也需要有自己的考慮，放置哪些信息能夠更加凸顯這個模塊的運營維度。例如，對于商品單元來說，基本元素是圖片、標題和價格，而對于特價秒殺樓層，單單只展示這三個元素還不足以體現(xiàn)優(yōu)惠搶購。這個時候我們可以分析，有哪些信息補充可以使得這個維度更加凸顯，如：①突出特價，可以用劃線價、直降金額、折扣標簽等。②突出緊張的促銷氛圍：可以增加活動倒計時、庫存進度條和行動召喚按鈕等等

2、信息限制

理清楚每個模塊的信息元素后，務(wù)必要和需求方溝通確認。因為在實際的項目設(shè)計中，信息總會有各種限制。先確認再設(shè)計，能避免后期因資源限制而返工。通常來說，我們會碰到的限制有如下兩種：①沒有該數(shù)據(jù)的來源  ②信息展示方式有限。例如運營方?jīng)]有資源做一些需要視覺設(shè)計的圖片，那我們在設(shè)計樣式時只能避免需要他們重新處理圖片的情況。

3、信息層次

信息整合的最后一步需要明確各個信息之間的層次。劃分層次可以從相關(guān)性和優(yōu)先級兩部分去著手考慮。根據(jù)相關(guān)性，我們對信息進行分類或歸納展示，緊密性更高的元素放在一起，這樣能讓用戶在閱讀的時候更加有條理地接受信息。而根據(jù)優(yōu)先級，我們可以確定哪部分信息需要突出展示或者提前展示。

叁 | 樣式設(shè)計

在梳理、整合信息后，我們需要把信息組合起來做展示。形式同樣要凸顯模塊的運營維度，但在形式的選擇上是可以多變且創(chuàng)新的。在這個過程，設(shè)計師的累積非常重要，它能讓我們快速判斷某種維度適合采取什么的樣式。而累積的途徑，除了平時需求項目的鍛煉，多看多收集一些優(yōu)秀頁面設(shè)計的案例也非常有幫助。

肆 | 全局自查、打磨細節(jié)

頁面基本內(nèi)容都已經(jīng)搭建好后，可以整體概覽一遍，從全局的角度檢查稿件，發(fā)現(xiàn)問題。全局自查沒有固定的方法和角度，畢竟項目和所處平臺不同，設(shè)計側(cè)重也會有所差異。但是自查的過程應(yīng)該避免沒有思路地瀏覽，隨意看到改到哪，這樣沒有針對性的檢查出現(xiàn)錯漏的概率會比較大。通常來說，我們可以按照層次遞進檢查，包括以下三個方面：

1、信息布局

全局的信息布局是否能體現(xiàn)頁面的氛圍和調(diào)性，模塊之間的比重是否合理，模塊內(nèi)的信息層次是否表達清晰等。

2、交互流程

頁面的交互流程是否順暢，觸發(fā)器是是否能讓用戶清晰認知，頁面反饋是否符合用戶預(yù)期等。

3、特殊狀態(tài)

流程的分支狀態(tài)是否補充完整，信息展示的極限情況等。