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




  • [ 平面理論教程 ] 5分鐘學會製作合適的交互輸出稿—- 設計教程




    教學主題: 5分鐘學會製作合適的交互輸出稿

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

    今天的這個教學主題是: 5分鐘學會製作合適的交互輸出稿

    這教學的重點為這幾點 [ 交互,輸出,合適,製作,學會,分鐘,產品,不同,頁面,架構, ]

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

    本文重點

    本文主要寫給準備轉交互或者想了解交互輸出的童鞋,而不知道交互稿應該怎麼做的。文中內容均為個人觀點,僅供參考哦。

    在製作交互輸出稿之前,我們要考慮的是這份稿子有可能給誰看【把對接人理解為目標用戶】,需要看哪些內容【訴求】,缺了什麼會有什麼情況發生【場景】。在不同的企業中,根據規模不同可能會有不同的人員,比如一人負責幾個人的工作,或者是沒有這個職業。為什麼說是合適的交互輸出稿,因為不同的企業有不同的工作方式,需要在不同企業中探索,並根據自身企業情況製作合適的交互輸出稿才是硬道理。

    一般來說,交互可能對接到的相關人員有產品經理,產品運營,UI設計,後台開發,重構設計,前端開發等,但經常對接的一般在3-4個職業。產品經理和產品運營,主要看功能實現,頁面的跳轉是否較多。UI設計,主要看原型布局,按照你的原型設計視覺稿。後台開發,主要看邏輯關係(更多的是產品邏輯)與整個信息架構。重構設計,還原H5頁面/網頁等,主要看交互的一些操作和說明,比如點擊后彈窗,點擊後有什麼反饋。前端開發,這裡可能不同公司叫法有不同,有做數據交接的,有做APP前端還原的(指安卓和IOS),主要看APP里的一些操作反饋。如果公司里人員較多,那麼可能這個人這次做這個需求,下次就不做這個需求(指需求多,人員穿插借用),那麼在不同人去看的時候,如果想知道這個交互是誰做的,對接哪個UI,就需要在交互稿里加個對接人名單了。

    5分鐘學會製作合適的交互輸出稿

    根據產品階段和需求製作不同類型的交互輸出。

    常見的交互稿表達形式有2種,一種是圖片展示型,一個是網頁文檔型。根據不同的產品階段,需求,表達方式會有所不同,追求高效工作效率。

    圖片展示型:一般用在產品迭代過程,頁數不多且都在同一張圖裡,方便在使用tower產品文檔時貼圖,一圖看完改版內容,方便對接人一次性看完。

    網頁文檔型:一般用在1.0初稿時,或者產品大改版方便對接人複製文案,頁面跳轉清晰,可擴展成為產品功能文檔,將產品需求和交互放在一份里。

    5分鐘學會製作合適的交互輸出稿

    首先是圖片展示型,一般是將各種細則放在一張圖裡。(以下將不同細則分開解析,其實是在一張圖裡)

    信息架構,根據不同的需求信息架構有2種,一種是功能型信息架構,一種是層級型信息架構。在功能型信息架構里,主要體現的是每個頁面的入口,功能,操作等,了解APP的一些頁面和功能。在層級型信息架構里,主要體現的是按12345…級頁面排放,清晰看到APP的層級架構有多少。

    5分鐘學會製作合適的交互輸出稿

    操作流程,體現的是用戶點擊某個目標時的反饋有什麼,比如點擊后彈窗,點擊后跳轉去哪,點擊後有什麼頁面動效反饋等等。這裡是給到開發這邊給你實現的。交互表達上需要說明清楚。

    原型布局,採用灰度層次,UI尺寸的一半,明暗強弱關係。如果原型稿是隨便的一個尺寸,那麼UI設計出來后可能效果就差別太大,比如說原型里一屏放了5個內容,但是由於原型尺寸不對,實際上UI設計出來后一屏只有3個之類。因此,尺寸應該採用UI設計的一半,有的設計用750*1334,有的用640*1136等,製作原型時採用自己公司UI設計稿的一半尺寸即可。

    5分鐘學會製作合適的交互輸出稿

    業務流程,描述APP里主業務流程,邏輯判斷等。比如註冊后判斷用戶狀態,接着下一步操作,對每個頁面銜接時有不同的判定。

    5分鐘學會製作合適的交互輸出稿

    優化要點,每次更新迭代都在交互稿里註明一下,每個頁面的更新優化是什麼,讓對接人快速提煉了解優化要素。

    交互說明,一般是針對交互稿里的規則說明描述,動作描述,狀態描述。比如排序方式,狀態怎麼變化,操作后的說明等。

    5分鐘學會製作合適的交互輸出稿

    特殊操作,對頁面內一些特殊操作製作操作示意圖,有靜態表達,也有動態GIF圖表達,主要是傳達一些不好用文字描述的內容,以圖文或動圖形式說明。

    對接人員,描述上下游對接的人有哪些,誰負責做這個需求。方便以後有問題找到對應的人。

    5分鐘學會製作合適的交互輸出稿

    網頁文檔型,以導出網頁的形式展示,且具備圖片型的細則只是位置不同,左側全局是導航欄,方便每個頁面去查看,一般用在大改版或者初版。圖中是產品文檔+交互文檔的整合體(1.0文檔),包含的模塊有:

    功能簡介模塊,有產品簡介,產品功能,功能規劃,版本歷史,修訂記錄(此部分主要是產品)

    流程架構模塊,有信息架構,頁面流程,業務流程(此部分主要是交互)

    交互原型模塊,有各個頁面的不同狀態,說明,操作示意等(此部分主要是交互)

    5分鐘學會製作合適的交互輸出稿

    總結:

    不管是圖片展示型,還是網頁文檔型,交互稿應該具備但不限於以下8條細則

    (根據自身企業情況,交互輸出稿一般都會有下面的任意4~6條左右細則)

    1,原型布局,灰度層次高質量還原內容,尺寸是UI設計稿的一半。

    2,交互說明,一些交互效果或規則說明。

    3,操作流程,描述點擊后的反饋是什麼,去哪,還是彈窗,還是提示。

    4,業務流程,描述業務主流程,邏輯判斷。

    5,優化要點,快速了解本次迭代的優化點,提供給多方即時查看。

    6,對接人員,了解本次優化的上下游對接人,在有什麼問題時快速找到對接人。

    7,特殊操作,一些複雜的交互操作,需要單獨製作示意圖。

    8,信息架構,在迭代頁面涉及多處或初期版本,可以增加一個信息架構圖。

    5分鐘學會製作合適的交互輸出稿

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

    希望我們所介紹的 5分鐘學會製作合適的交互輸出稿 這教學會喜歡

    文章標題: 骨子愛創意- 5分鐘學會製作合適的交互輸出稿–轉載請註明來源處

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

    文章相關關鍵字為: 交互,輸出,合適,製作,學會,分鐘,產品,不同,頁面,架構,

    本文永久連結 :5分鐘學會製作合適的交互輸出稿

    本文轉載自 :VIA