• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 詳細解析那些不被重視的交互稿細節—- 設計教程




    教學主題: 詳細解析那些不被重視的交互稿細節

    大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

    今天的這個教學主題是: 詳細解析那些不被重視的交互稿細節

    這教學的重點為這幾點 [ 交互,細節,重視,那些,解析,詳細,註釋,頁面,設計,說明, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    作為一個經歷了從小到大公司的交互設計師,筆者對於交互設計的認識,也從淺入深,從宏觀到微觀,自己慢慢的形成了對交互設計的一系列心得。

    作為一個經歷了從小到大公司的交互設計師,筆者對於交互設計的認識,也從淺入深,從宏觀到微觀,自己慢慢的形成了對交互設計的一系列心得。

    首頁

    交互設計中直接體現設計師工作成果的是交互設計稿。關於交互設計稿,在不同類型的公司,對交互設計稿的要求也不一樣,規範度也隨着公司的規模變得越來越重要。在交互設計稿中,不僅僅包括原型設計,還包括原型的全局解釋、原型設計說明及原型的更改記錄等。也許,這些內容在有些人眼中無關緊要。但是,在分工明確、產品版本迭代清晰的公司中,這些是較為注重的內容,因為這些才是細微之處見功夫。

    在創業型的公司,由於人員不多,有的人員會身兼多職,同時項目單一,大家的目標一致,所以開發過程中的溝通成本較低,另外,在項目產品的迭代過程中,開發人員的面對面溝通就更加有效。但是,在規模較大的公司,由於人員、項目眾多,很難協調大家面對面的溝通,因此,在產品開發的每個階段的產出物的規範化,就顯得尤為重要,特別是設計的說明與註釋。交互稿的設計說明與註釋非常有助於交互設計意圖的準確傳達,能夠幫助產品開發各階段的人員,自主的了解其設計目的,解答開發過程中的疑惑。今天我們就來聊一聊交互設計稿中這些被人忽略的細微之處。

    第一:交互設計原型的全局註釋

    交互設計的全局註釋包括設計規範的說明和視覺界面的要求與期望兩部分。

    1)設計規範說明

    軟件的設計規範說明是指在原型開始或者原型頁面的頂部,關於原型中出現的一些統一的元素、控件等的說明,可以在原型中不做解釋,使原型界面顯得整潔。

    2)視覺界面的要求與期望

    視覺界面的要求與期望是交互設計師在原型中要傳達給視覺設計師的頁面風格與重點的界面元素,使交互設計師的設計理念得到貫徹和實施,保證視覺稿與產品經理與交互設計師的想法一致。視覺界面的要求與期望包括主色調、頁面風格、重點元素、頁面情緒等等。

    在交互原型中,除去原型界面,原型的設計說明與註釋是交互設計原型中分量最多的部分,也是交互意圖傳達的重要途徑。

    第二:原型的說明與註釋

    通過實踐,筆者關於原型的註釋和說明的方法與技巧如下:

    1)可點擊註釋

    在交互原型中,鼠標點擊事件是經常發生的,包括頁面之間的跳轉,動態面板之間的切換等等。而在頁面中並不是所有的button都能點擊,因此就需要在界面中可點擊的地方放置可點擊註釋,通常是手型標示,或者其他的半透明的圓形,這些是可以自定義的。對於不太常用的標識,需要在全局註釋中的設計規範說明中加以規範說明。

    2)批註框註釋

    當頁面內容較多時,可以採用批註框註釋的方式,對元素進行定向註釋說明。通常採用在形狀內寫上註釋說明,並用箭頭連接形狀與註釋元素。但是連接箭頭、註釋框和說明文字要保持顏色統一,以區別頁面原有內容。Ps:註釋顏色可以在全局註釋中說明。

    詳細解析那些不被重視的交互稿細節

    △ 批註框註釋

    3)Axure自帶控件註釋

    作為強大的交互原型設計工具,Axure怎麼能沒有標註功能呢?雖然Axure的標註方式與查閱不是很方便,但是在保證設計頁面的整潔上確實很有效果的。這種比較適合大家相對來說比較熟悉的控件,在有特殊說明時,可以點擊查閱,其默認狀態為隱藏。選中要註釋的元素,在NOTES中輸入註釋說明文字即可。在預覽界面中點擊元素右上角的標示,即可查看註釋內容。

    詳細解析那些不被重視的交互稿細節

    △ Axure自帶控件註釋

    效果展示:

    詳細解析那些不被重視的交互稿細節

    4)頁面內註釋

    頁面內註釋是指將註釋內容直接在所要說明的內容旁邊,註釋文字與頁面的批註元素採用統一色調,以區別原有內容。當頁面元素較少時,使用少量的文字註釋,顯得頁面精緻、有細節,同時又不顯得頁面凌亂。

    5)頁面氣泡註釋

    頁面氣泡註釋是將頁面內的細節操作流程分解,進行補充說明。該方法使用與頁面較為複雜,但頁面中只有少量元素可以操作,並有相應的反饋,這樣可以減少頁面數量,同時頁面細節豐富,且小功能得到很好的表現。不過,氣泡註釋屬於就地顯示,建議一個頁面中的氣泡層級不要超過三個。

    6)頁面右側編號註釋

    當一個頁面內有多處註釋時,將元素進行編號,並統一在頁面內容右側進行說明。

    注意:

    註釋編號不要遮擋界面內容;

    設計說明與編號的關聯性要強(可用區域截圖);

    右側的批註區域不要太寬,一般在200-400像素之間。

    7)新增頁面註釋

    新增頁面相對來說比較簡單,但使用範圍卻相對局限。建議盡量少使用這種註釋方法,只適用於頁面註釋內容較多,且氣泡註釋與頁面右側編碼註釋不能滿足需求時使用。該方法的設計頁面與設計說明分割在不同的頁面,造成閱讀上的跳躍性,易打斷整個功能的邏輯操作流程。

    8)故事版註釋

    對於明顯的操作流程的註釋,可以採用連接線貫穿起來或者分步驟講解的方式,將各個產品的操作過程表述清楚。該方法類似需求分析中的故事版法,所以叫故事版註釋。這種方法與可點擊註釋向配合,可以完整的表現一個產品功能的邏輯流程。

    詳細解析那些不被重視的交互稿細節

    9)工具欄註釋

    該方法僅用來註釋頁面中出現的工具、圖標的說明。其使用方法,類似於右側編號註釋,但沒有編號,而是用圖標代替,圖標右側則是其功能的說明。

    10)事件註釋

    對於交互事件較多,動態切換頻繁頁面,需要鼠標動作以及鍵盤快捷鍵的操作說明。例如,鼠標的事件包括下列若干方式:

    詳細解析那些不被重視的交互稿細節

    11)狀態註釋

    頁面元素在不同的交互過程中,會展示多種狀態,使用統一的格式進行註釋說明,便於對比查看。以文件夾的操作與顯示方式為例,可以用圖形文字來描述文件夾處於不同狀態的形式與功能。

    詳細解析那些不被重視的交互稿細節

    12)右鍵註釋

    右鍵菜單作為界面的輔助功能,放在頁面內容易遮擋頁面原有內容,可使用設計註釋的方式,展開右鍵菜單的內容。

    最後,是交互設計原型的發布。

    原型發布主要包括文檔變更記錄與標誌。

    1)文檔變更記錄

    文檔變更記錄一般位於原型文檔目錄最後一頁,用於版本控制,為後續升級改進提供參考信息。變更記錄可以以列表的形式展示或者其他形式,主要包括序號、日期、版本號、變更人(修改人)、修改內容。

    詳細解析那些不被重視的交互稿細節

    2)標誌

    標誌是在發布原型時,使用統一的名片樣式作為標誌,記錄作者,便於溝通。

    詳細解析那些不被重視的交互稿細節

    添加名片的方式是:點擊Axure右上角的發布,點擊生成HTML文件或者在HTML文件中生成當前頁面,在彈出框中點擊標誌,即可導入圖片格式的名片,建議名片的尺寸不要太大,信息突出。導入以後,不用點擊完成,點擊取消,即可在預覽頁面中,左上角的頁面結構菜單上部看到該標誌。

    詳細解析那些不被重視的交互稿細節

    添加效果如圖:

    詳細解析那些不被重視的交互稿細節

    原型的註釋方式很多,雖然講了那麼多,但是,還是無法窮盡所有的註釋方法。在不同的需求場景中,會根據實際情況採用看似不合理的註釋方式。無論採用什麼樣的註釋方式,其目的都是增強頁面的邏輯、功能的表達,實現設計意圖的準確傳達。

    交互原型不僅僅只是產品界面,背後還有很多細節要不斷的去豐富,去完善。

    看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

    希望我們所介紹的 詳細解析那些不被重視的交互稿細節 這教學會喜歡

    文章標題: 骨子愛創意- 詳細解析那些不被重視的交互稿細節–轉載請註明來源處

    本教學分類為平面理論教程中的 設計教程相關教學

    文章相關關鍵字為: 交互,細節,重視,那些,解析,詳細,註釋,頁面,設計,說明,

    本文永久連結 :詳細解析那些不被重視的交互稿細節

    本文轉載自 :VIA