"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
技巧二:響應式佈局的設計
繪製原型時,我們可以先設置為中等屏幕1366 X 768的高度,然後,再給元件添加“載入時”尺寸變化的交互事件。以上面的框架頁面來講,我們可以將的背景框寬度設置為:[[Window.width]],直接延伸為窗口的尺寸,其高度不變。
同時,將【側導航】的高度設置為:[[Window.height-頂部欄的高度]],寬度不變,將【內聯框架】的寬度設置為:[[Window.width-側導航寬度]],高度設置為:[[Window.height-頂部欄的高度]]。
這樣,加載框架頁面時,即可元件的尺寸即可全屏鋪滿預覽。
技巧三:將頁面標題框轉化為母版
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
技巧二:響應式佈局的設計
繪製原型時,我們可以先設置為中等屏幕1366 X 768的高度,然後,再給元件添加“載入時”尺寸變化的交互事件。以上面的框架頁面來講,我們可以將的背景框寬度設置為:[[Window.width]],直接延伸為窗口的尺寸,其高度不變。
同時,將【側導航】的高度設置為:[[Window.height-頂部欄的高度]],寬度不變,將【內聯框架】的寬度設置為:[[Window.width-側導航寬度]],高度設置為:[[Window.height-頂部欄的高度]]。
這樣,加載框架頁面時,即可元件的尺寸即可全屏鋪滿預覽。
技巧三:將頁面標題框轉化為母版
我們可以給“頁面標題框”添加“載入時”文本的交互事件,設置為:元件 》設置文本 》勾選“當前元件”》,將文本值設置為[[PageName]],這樣可以直接獲取左側列表的頁面標題,省去人工再次輸入的繁瑣。
同時將其轉為母版,這樣後期想要變更標題導航框的樣式,只需要在母版中更改一次,即能將所有其他頁面引用的“標題導航框”樣式一起更改。
設置如下:
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
技巧二:響應式佈局的設計
繪製原型時,我們可以先設置為中等屏幕1366 X 768的高度,然後,再給元件添加“載入時”尺寸變化的交互事件。以上面的框架頁面來講,我們可以將的背景框寬度設置為:[[Window.width]],直接延伸為窗口的尺寸,其高度不變。
同時,將【側導航】的高度設置為:[[Window.height-頂部欄的高度]],寬度不變,將【內聯框架】的寬度設置為:[[Window.width-側導航寬度]],高度設置為:[[Window.height-頂部欄的高度]]。
這樣,加載框架頁面時,即可元件的尺寸即可全屏鋪滿預覽。
技巧三:將頁面標題框轉化為母版
我們可以給“頁面標題框”添加“載入時”文本的交互事件,設置為:元件 》設置文本 》勾選“當前元件”》,將文本值設置為[[PageName]],這樣可以直接獲取左側列表的頁面標題,省去人工再次輸入的繁瑣。
同時將其轉為母版,這樣後期想要變更標題導航框的樣式,只需要在母版中更改一次,即能將所有其他頁面引用的“標題導航框”樣式一起更改。
設置如下:
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
技巧二:響應式佈局的設計
繪製原型時,我們可以先設置為中等屏幕1366 X 768的高度,然後,再給元件添加“載入時”尺寸變化的交互事件。以上面的框架頁面來講,我們可以將的背景框寬度設置為:[[Window.width]],直接延伸為窗口的尺寸,其高度不變。
同時,將【側導航】的高度設置為:[[Window.height-頂部欄的高度]],寬度不變,將【內聯框架】的寬度設置為:[[Window.width-側導航寬度]],高度設置為:[[Window.height-頂部欄的高度]]。
這樣,加載框架頁面時,即可元件的尺寸即可全屏鋪滿預覽。
技巧三:將頁面標題框轉化為母版
我們可以給“頁面標題框”添加“載入時”文本的交互事件,設置為:元件 》設置文本 》勾選“當前元件”》,將文本值設置為[[PageName]],這樣可以直接獲取左側列表的頁面標題,省去人工再次輸入的繁瑣。
同時將其轉為母版,這樣後期想要變更標題導航框的樣式,只需要在母版中更改一次,即能將所有其他頁面引用的“標題導航框”樣式一起更改。
設置如下:
技巧四:將彈窗提示轉化為母版。
使用頻率最高的彈窗就是提交和刪除的操作提示,我們可以將其轉為動態面板,且垂直水平居中定位瀏覽器彈出,然後再轉為母版, 這樣全站所有的刪除提示彈窗都引用此母版提示彈窗,後期的優化調整非常便捷高效。
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
技巧二:響應式佈局的設計
繪製原型時,我們可以先設置為中等屏幕1366 X 768的高度,然後,再給元件添加“載入時”尺寸變化的交互事件。以上面的框架頁面來講,我們可以將的背景框寬度設置為:[[Window.width]],直接延伸為窗口的尺寸,其高度不變。
同時,將【側導航】的高度設置為:[[Window.height-頂部欄的高度]],寬度不變,將【內聯框架】的寬度設置為:[[Window.width-側導航寬度]],高度設置為:[[Window.height-頂部欄的高度]]。
這樣,加載框架頁面時,即可元件的尺寸即可全屏鋪滿預覽。
技巧三:將頁面標題框轉化為母版
我們可以給“頁面標題框”添加“載入時”文本的交互事件,設置為:元件 》設置文本 》勾選“當前元件”》,將文本值設置為[[PageName]],這樣可以直接獲取左側列表的頁面標題,省去人工再次輸入的繁瑣。
同時將其轉為母版,這樣後期想要變更標題導航框的樣式,只需要在母版中更改一次,即能將所有其他頁面引用的“標題導航框”樣式一起更改。
設置如下:
技巧四:將彈窗提示轉化為母版。
使用頻率最高的彈窗就是提交和刪除的操作提示,我們可以將其轉為動態面板,且垂直水平居中定位瀏覽器彈出,然後再轉為母版, 這樣全站所有的刪除提示彈窗都引用此母版提示彈窗,後期的優化調整非常便捷高效。
"分享個人在繪製PC端web網站交互原型中一些設計技巧,enjoy~
技巧一:搭建導航框架頁面
當自己還是一個小白時,開始著手設計web界面時,最容易犯的一個錯誤就是:基本每一個頁面的繪製都是頂部導航、左側導航、右側則為頁面內容。
如下所示:
當設計的頁面比較多時,一旦改變了側導航的命名或者更改了跳轉鏈接,就得把所有的頁面的導航都替換掉,操作十分的複雜冗餘。
通過後面的課外學習後,才懂得了利用【內聯框架】來實現頁面內容之間的切換。只要搭建一個框架頁面即可,不用重複複製粘貼。
佈局排版如下:
只需要給導航中的模塊名稱添加【鼠標點擊時】,在內聯框架中鏈接到某一個頁面即可,設置如下:
技巧二:響應式佈局的設計
繪製原型時,我們可以先設置為中等屏幕1366 X 768的高度,然後,再給元件添加“載入時”尺寸變化的交互事件。以上面的框架頁面來講,我們可以將的背景框寬度設置為:[[Window.width]],直接延伸為窗口的尺寸,其高度不變。
同時,將【側導航】的高度設置為:[[Window.height-頂部欄的高度]],寬度不變,將【內聯框架】的寬度設置為:[[Window.width-側導航寬度]],高度設置為:[[Window.height-頂部欄的高度]]。
這樣,加載框架頁面時,即可元件的尺寸即可全屏鋪滿預覽。
技巧三:將頁面標題框轉化為母版
我們可以給“頁面標題框”添加“載入時”文本的交互事件,設置為:元件 》設置文本 》勾選“當前元件”》,將文本值設置為[[PageName]],這樣可以直接獲取左側列表的頁面標題,省去人工再次輸入的繁瑣。
同時將其轉為母版,這樣後期想要變更標題導航框的樣式,只需要在母版中更改一次,即能將所有其他頁面引用的“標題導航框”樣式一起更改。
設置如下:
技巧四:將彈窗提示轉化為母版。
使用頻率最高的彈窗就是提交和刪除的操作提示,我們可以將其轉為動態面板,且垂直水平居中定位瀏覽器彈出,然後再轉為母版, 這樣全站所有的刪除提示彈窗都引用此母版提示彈窗,後期的優化調整非常便捷高效。
同理,我們可以將頁面的其他共用彈窗和模塊,如頁腳等都轉化為母版管理。
作者:火星人~艾斯,公眾號:艾斯的Axure峽谷
本文由 @火星人~艾斯 原創發佈於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議
"