axure商城

【教程】提升原型頁面美觀度之間距大小詳解

接上一章【教程】快速提升原型頁面美觀度之對齊方式詳解,今天講解如何調整間距大小,來快速提升原型整體的美感。
  • 調整控件對齊方式
  • 調整控件之間的間距大小
  • 調整字體大小樣式
  • 使用適當的顏色搭配
對于初級設計師來講,間距是很容易被忽略的細節,也不容易把握分寸,往往設計出來的頁面不夠美觀,甚至導致頁面內容混亂不堪,讓人不知所以,而合適和統一的間距規則,能夠有效的提升頁面的整齊度和內容信息的聚合度,讓頁面結構整齊有序內容層次分明,一目了然。
事實上間距的調整沒有一個絕對的標準,找到合適的適用于當前系統的尺寸即可,這里推薦幾個使用較多的尺寸:4px、8px、10px、12px、16px、20px、24px、30px、32px、40px、48px、60px、80px等,這么多尺寸不用都用上,需要從中挑選幾個搭配起來使用,如:8px、12px、24px
知道了這些間距尺寸,那么在Axure中如何使用起來呢,下面從元件間間距、元件內間距兩個方面來講解

元件間間距

在Axure中可以用快捷鍵來控制間距,能夠方便快捷準確的調整間距
Shift+方向鍵(→↑←↓)
Ctrl+方向鍵(→↑←↓)
用快捷鍵操作后,元件會以一個設置好的單元間距進行水平或者垂直移動,默認單元間距為10px,也可以手動修改成你需要的尺寸,修改方式如下圖所示:
“布局-柵格和輔助線-對齊元件設置”,出現元件對齊設置,設置成需要的尺寸即可
示例
使用間距快捷鍵將散亂的元件按照一定的間距規則重新調整,將基本信息標題與內容區分開,讓內容變得更整齊有序,結構也更清晰

元件內間距

元件內間距可以分為元件組內間距單元件文字間距
  • 元件組是由多個元件組合而成形成一個集合,往往都有明確的界限,元件組內間距與元件間間距的調整方式相同,都可以通過快捷鍵控制間距,示例如下:
  • 單元件文字間距,通過控制行間距與填充來完成,這兩個控制項在Axure面板的右邊【檢視】的樣式里面
行間距用來控制段落文字之間的間距
填充用來控制元件內間距的大小
一般行間距會與填充結合起來使用,效果如下所示:
到此為止,Axure中如何調整間距大小的講解就到此為止了,你Get到了嗎~

優職坊:致力于產出優質的axure資源,包括組件庫、原型、高保真原型、Axure教程等用戶體驗相關的資源。交互設計師、產品經理學習Axure技術的不二選擇!
更多優質Axure原型資源:https://www.axureshop.com/shop/18

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

仿網易云播放器:帶聲音可切換歌曲的播放器

2018-12-29 19:56:02

Axure教程

Axure RP 9 教程—全局變量的使用案例

2019-1-9 20:19:35

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo