中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

繪制網頁原型說來簡單，技術上與系統、產品的原型相比大同小異。但我們會發現，將幾個內容區域畫好后羅列在一起，預覽時的效果總覺得與真實的網站有很大差距。而問題的關鍵，便在于是否能夠打磨網頁中的細節交互。

下面，以內容較多的首頁為例，圍繞最常使用的交互效果，進行簡要講解。

一、劃分區域，設置寬度自適應

首頁包含的信息量很大，瀏覽時通常按內容分為若干屏，一次展示一屏。因此，可以先將各屏內容的背景擺放好，并做好寬度自適應的配置。

步驟1

準備幾個尺寸1348*640px的矩形作為區域背景（本機演示分辨率為1366*768，可根據不同分辨率自行設置尺寸），分別命名為“第X屏背景”，豎向擺放在一起，并設置相互交替的顏色。這里設置交替顏色是為了各屏的預覽效果更明顯。

步驟2

點擊空白處，取消選中所有元件。在右側的“交互”下，雙擊打開“頁面載入時”用例編輯窗口。

步驟3

在用例編輯窗口中，左側選擇“元件”-“設置尺寸”（Set Size），在右側的元件選擇區域中，勾選所有背景矩形，可以看到中間的組織動作區域中已經帶出了相應事件。在元件選擇區域的下方，點擊“寬”后面的fx小按鈕，打開編輯值窗口。

步驟4

在所有矩形“寬”的編輯值窗口中，刪掉原寬度數值（這里為1348），點擊上方的插入變量或函數鏈接，選擇“窗口”-“Window.width”。點擊“確定”，可以看到所有背景矩形在頁面載入時的寬度均已設置為Window.width，即與當前瀏覽器窗口同寬，在用例編輯窗口中點擊“確定”。

步驟5

在右側的“交互”中點擊“頁面載入時”的Case1，Ctrl+C復制；點擊“窗口調整尺寸時”，Ctrl+V粘貼事件。預覽頁面可以看到此時在頁面載入與窗口調整尺寸時，所有背景區域的寬度始終能占滿整個屏幕。

二、增加導航，設置錨點交互

上述首頁背景設置好后，開始為首頁添加頂部導航欄，并實現點擊不同導航按鈕，頁面滾動到相應區域，且滾動到下方時導航欄能固定在頂部的效果。

步驟1

準備一個尺寸1348*75px的矩形作為導航欄背景，背景上擺放六個105*75px的矩形作為導航欄按鈕。

步驟2

選中導航欄背景和六個導航按鈕，右鍵點擊“轉換為動態面板”。為動態面板命名為“導航面板”，在面板狀態管理窗口中，復制一個state1狀態為state2，為兩個狀態分別命名為“樣式1”“樣式2”。

步驟3

分別編輯“導航面板”中“樣式1”“樣式2”兩個狀態內各自的導航欄樣式。在“樣式1”狀態中，設置元件的背景色均為透明，導航欄按鈕文字顏色為白色；“樣式2”狀態中，設置元件的背景色均為白色，且具有藍色下邊框，導航欄按鈕文字為黑色。

步驟4

分別在各屏背景的左上角，放置一個20*20的熱區元件，元件的下邊框與各屏背景的上邊框重合，并為各個熱區元件命名為“第X屏錨點”。

步驟5

為“導航面板”的“樣式1”“樣式2”兩個狀態配置相應的點擊事件。首先為各個導航按鈕命名為“樣式X-按鈕X”方便查找。接下來在“樣式1”狀態中，選中“樣式1-按鈕1”，在右側的“交互”下，雙擊打開“鼠標單擊時”用例編輯窗口。

步驟6

在用例編輯窗口中，左側選擇“鏈接”-“滾動到元件<錨鏈接>”，在右側的元件選擇區域中，勾選“第一屏錨點”，下方選擇“僅垂直滾動”，動畫為“線性500毫秒”。

步驟7

在用例編輯窗口中，左側選擇“元件”-“設置面板狀態”，在右側的元件選擇區域中，勾選“導航面板”，下方的面板狀態選擇“樣式1”，進入和退出動畫選擇“向下滑動500毫秒”。

步驟8

與步驟7同理，為“樣式1”“樣式2”兩個面板狀態中的其他11個導航按鈕都配置上滾動錨點和設置面板狀態的事件，每個按鈕滾動到的錨點一定要選擇其對應的第X屏錨點。

需要注意的是，在“樣式1”面板狀態中，除第一個導航按鈕外，其他5個按鈕都要設置到“樣式2”面板；同理在“樣式2”面板狀態中，第一個導航按鈕設置到“樣式1”面板，其他5個按鈕都要設置到“樣式2”面板。

配置結果概覽：

步驟9

選中“導航面板”，在右側選擇“固定到瀏覽器”。在固定到瀏覽器窗口中，勾選“始終保持在頂層”，其余按默認即可。

步驟10

分別選中各屏背景，在右側的交互下，雙擊“鼠標移入時”打開用例編輯窗口。

步驟11

在用例編輯窗口中，左側選擇“元件”-“設置面板狀態”，在右側的元件選擇區域中，勾選“導航面板”，下方的面板狀態選擇“樣式1”，進入和退出動畫選擇“向下滑動500毫秒”。同理，為第2-6屏背景設置面板狀態為“樣式2”。

操作至此，已經可以滿足點擊導航欄按鈕滾動到指定區域，且導航欄始終保持在頂層。當鼠標滾動瀏覽到指定區域時，導航欄的狀態也隨之在“樣式1”與“樣式2”間改變。

此時，還可以進行樣式優化，即為各個導航欄按鈕添加選中樣式，并在各屏移入事件中也配置上導航按鈕的選中事件，可以使得選中的按鈕更加明顯，頁面瀏覽更加美觀。

三、增加元素，完善首頁結構

上述首頁的滾動效果設置好后，網頁的框架就搭好了，接下來，我們可以自主添加網頁的內容了。下面以普通網站為例做一些簡單的示例效果填充我們的首頁，供大家參考。

第一屏

左側可放置一張網站相關的圖片，右側以一級+二級標語的形式介紹本網站，下方可添加一個試用或注冊鏈接。

第二屏

頂部可放置宣傳標語，下方以帶圖小條目的形式，展示網站的幾條特性或其他內容。

第三屏

頂部可放置宣傳標語，下方展示欄目信息，各欄目下包含多條新聞/資訊/通知等內容。內容可配圖，也可只展示文字列表。

第四屏

頂部可放置宣傳標語，下方與第二屏類似，下方可以帶圖小條目的形式，展示選擇本網站或本產品的優勢或其他內容。

第五屏

沒有什么重要內容需要介紹了的話，可放網站的合作單位等友情鏈接。

第六屏

最后當然就是網站底部的版權信息了，此處省略。

繪制網頁原型說簡單也簡單，說難也難，要設計一個優秀的網站仍然需要更多優秀的作品和經驗得以啟發學習。本文只是從框架上為大家拋磚引玉，希望大家看到這里，能得到一些靈感和收獲。

原型獲?。?/p>

鏈接：https://pan.baidu.com/s/14QYymW-ez62l05PvBWRvyg

提取碼：u8dk

作者：醉貓，軟件設計師，3年系統、產品設計經驗，曾參與多個系統、產品的設計開發工作。

題圖來自 Unsplash，基于CC0協議。