• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      Axure高保真還原Web首頁布局和交互教程

      本文轉載自:http://www.woshipm.com/rp/298717.html?注意本文為Axure 7.0的教程!

      f1

      Axure是產品經理們最常使用的原型繪制工具之一,熟練掌握Axure會讓產品經理在產品設計時事半功倍。筆者剛開始學習Axure時,常通過高保真還原一些現有的網頁來提高自己的技能。下面將通過一個高保證還原一個真實實例來介紹Auxre的使用方法 ,涉及頁面布局、頁面交互等常用技巧。如果你剛剛接觸Axure,熟練掌握本文的案例和方法,你的Axure使用技能突飛猛進。

      案例任務:

      使用Axure 7.0高保真還原www.ohsame.com 首頁(以下簡稱same官網) 的布局和交互。

      在開始做之前,我們首先觀察一下same官網,將需要做的任務分解成為一個個小任務,然后逐一擊破。

      任務組一:頁面布局

      我們首先看看可以將頁面布局分解成哪些任務:

      • 頁面內容居中
      • 背景由上中下三個色塊組成
      • 產品介紹部分的6個部分布局一致但內容不同

      布局一

      頁面居中是網頁布局的一般要求,在Axure中可以通設置“頁面樣式”居中對齊來達到這一效果:

      Image1-1

      布局二

      網頁中較常見的只會使用一種背景顏色,直接在“頁面樣式”的背景色中設置相應顏色即可。尚若要設置多種背景顏色布局,而且在不同的設備和瀏覽器上都呈現相同效果,就需要采用科學而不是乖戾的做法。我的方案是:使用上中下三色背景圖片來布局。我測量了一下三個背景色塊的高度,并使用ps制作了一張寬2px高1410px(藍色 458px: 白色 916px: 藍色 36px)的三色png圖片。然后在“頁面樣式”的背景圖中導入這張背景圖。

      Image1-2

      布局三

      6塊部分內容一致但布局不同,既不能使用動態面板也不能使用母版去處理。最不講技巧性地做法當然是使用“復制-粘貼”方式復制六個出來,然后逐一改掉字體和背景圖片。但是,今天我想說的是一種更技巧性的做法:使用中繼器來布局。

      Axure7.0默認元件庫新增了“中繼器(repeater)”這種強大的元件。使用中繼器可以輕松的布局出相同樣式但內容不用的頁面。每一個中繼器都是由三塊基本元素組成:展示元件組、數據集、項目交互邏輯。展示原件組規定了展示出來元件的基本布局和樣式;數據集規定了展示的內容;項目交互邏輯則將二者聯系起來,決定那一條數據顯示在哪一個元件上。理解了中繼器的邏輯,使用起來就會很方便了。

      3.1 布局中繼器展示元件組

      首先從元件庫中拖出一個中繼器元件出來,如圖左側的“原始狀態”。雙擊原始狀態的中繼器進入中繼器編輯界面,當然原始的這三個矩形并不是我們想要的元件,于是我毫不留情的刪掉了他們。然后在頁面上拖入了一個圖片元件和一個段落元件,并分別在右側編輯欄給元件命名。命名可以幫助我們在添加用例時快速找到需要操作的元件,合適的元件名能讓工作有更高效率。經過調整圖片的大小和段落的樣式,完成狀態的中繼器展示原件組如圖右側所示。

      Image1-3

      3.2 設置數據集

      打開頁面下方的編輯欄,選擇最左邊的“中繼器數據集”。數據集的每一行記錄對應的一條相關的數據。我們需要布局6個產品介紹內容,就需要添加6條數據記錄。將鼠標放在數據集上,單擊鼠標右鍵可以導入圖片。創建完之后數據集如下。

      Image1-4

      3.3 接下來,需要編輯“中繼器項目交互”,將數據集與展示原件組聯系起來

      就像之前描述過的一樣,這一塊主要說明了哪一數據集應該被賦值給哪一個元件。雙擊“用例”可以進入用例編輯頁面,使數據集的第一列數據等于文本,第二列數據等于圖片。

      Image1-5

      (用例編輯界面)

      Image1-6

      完成這些之后,回到主頁,我們發現6個布局塊縱向排列,這并不符合原圖的布局。這就需要再次設置一下“中繼器格式”。橫向排列,每行3個;然后設置一下行間距和列間距。

      Image1-7

      再次回到主頁,布局就很完美了。

      處理完布局之后,我們來觀察一下頁面交互,還是像上面一樣進行任務分解。

      任務組二——交互設計

      分解之后,得到如下任務組:

      • 將鼠標移入“立刻下載”按鈕,按鈕背景色變深;
      • 點擊“立刻下載”按鈕,“下載”對話框從頁面顯現出來并移動到頁面中央,同時“下載”對話框之外形成遮幕效果;
      • 點擊“下載”對話框之外的區域,對話框向下移動然后消失。點擊“下載”對話框的背景,無任何效果;
      • 將鼠標移入“iPhone 下載”和“Android 下載”按鈕,按鈕背景色變深,點擊按鈕在當前頁打開下載鏈接。

      經過任務分解之后,我們發現,這些看似復雜的交互,其實是由一塊塊小的交互步驟組成的。經過一些分解然后組合在一起,就可以實現頁面的效果。

      交互一

      鼠標移入特定區域并給出反饋,這是一種很常見的交互效果。給按鈕添加兩個用例,分別在鼠標移入和移出時觸發不同的交互用例即可。移入時還需要判斷“下載”對話框是否顯示,只有在“下載”對話框不顯示時才需要觸發此用例。

      Image2-1

      交互二

      這是一個較復雜連續的交互動作,分成4部分組成:

      首先需要將下載窗口歸位,以防止上一次操作中沒有還原下載窗口,導致第二次操作時顯示效果不一致。

      第二步,將下載窗口顯示出來;

      第三步,將下載窗口上移到頁面中間位置;這一步與第二步之間的動作時間需要仔細調節,以免兩步之間不連貫。

      第四步,顯示遮罩效果。

      Image2-2

      交互三

      這一步與上一步效果相反,不過觸發的區域是“下載”對話框之外的頁面,而不是“下載”按鈕??梢栽诘撞烤庉嫏谔砑右粋€“頁面單擊鼠標時”觸發的用例:

      首先,判斷“下載窗口”是否顯示并且鼠標點擊的是下載窗口之外的區域;

      第二步,將“下載窗口”下移;

      第三步,向下滑動“下載窗口”并隱藏。第二步和第三步同樣需要調節好動作時間,使動作連貫協調。

      Image2-3

      當然,除了這些顯而易見的交互效果。我們還容易發現:

      當頁面滾動時,下載窗口不動??梢园选跋螺d窗口”轉變成動態面板,并在右鍵菜單中設置為“固定到瀏覽器”。

      Image2-4

      交互四

      這一交互與第一個交互相同,下面列出用例:

      Image2-5

      總結

      到此,整個頁面就設計完成了。通過對線上存在交互實例進行高保真還原是用來鍛煉原型工具使用技巧的絕好方法,同樣也可以加深我們對交互動作在代碼實現邏輯的理解,知道前端設計師的不易。

      本文所用到的素材及Axure成品

      作者:馬成宇(微信號happymcy),有米科技產品經理,曾多次在有米內部進行Axure培訓。

      給TA買糖
      共{{data.count}}人
      人已贊賞
      高級教程

      中繼器單條件、多條件搜索詳解

      2016-3-26 22:16:49

      高級教程

      頁面向下滾動時導航頂部吸附效果

      2016-4-25 14:54:58

      axure商城
      0 條回復 A文章作者 M管理員
        暫無討論,說說你的看法吧
      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">