小程序UI設計（1）-布局
工欲善其事必先利其器。下面為大家介紹一款工具軟件，如何做到輕松布局。 工具簡介：小程序layout設計工具，可視化方式進行小程序UI設計。通過鼠標拖拽組件方式進行UI布局。工具提供符合微信視覺統一的模板，並且按照FlexBox方式可視化布局。自動生成wxml和wxss，復制到微信 ...
原文：小程序UI設計之-介紹篇
工具截圖此工具通過可視化操作進行布局，依據iphone 尺寸設置畫布，可以自動生成rpx和百分比的wxss。后續還會增加js代碼自動生成。工具中組件按照微信小程序開發規范進行了缺省設置，margin padding fontsize fontfamily color等屬性按照微信視覺一致規范定制而成。軟件左側是常用組件，中間是畫布，右側是wxss屬性設置面板。wviewrow組件是小程序view的 ...
2016-12-13 13:21 4 8065 推薦指數：
相關推薦
小程序UI設計（9）-文字排版
小程序中一般很少大段落的文字，基本是4、5個字的主題、一行標題、一行摘要、兩行描述。顯示時超出部分用省略號代替。下面結合工具使用介紹一下文字排版的方法。先看效果圖。 工具中屬性設置如下圖：兩行文字屬性，限制行數=2，表示最多兩行，超出部分用省略號代替。 不限制行數屬性中限制行數=0，表示在小程序 ...
小程序UI設計（2）-符合視覺規范-字體規范
下圖是微信小程序官方要求字體規范 根據此要求小程序設計工具定制了符合規范的組件。如下圖 工具使用時，將左側組件拖拽到設計區域即可。字體大小和顏色都是按照規范設置的。在使用時根據微信要求在不同位置擺放即可。以下截圖是text組件使用范例 ...
小程序UI設計（5）-符合視覺規范-按鈕視覺規范
在設計工具中，根據規范我們定義了大中小三種按鈕的尺寸大：720rpx *94rpx 圓角10px 字體18中：360rpx*70rpx 圓角8px 字體16 文字距離兩邊最小60小：120rpx*60rpx 圓角6px 字體13 文字距離兩邊最小30這些按鈕都放在工具的模板中，如下圖： 微信中 ...
小程序UI設計（7）-布局分解-左-上下結構
FlexBox布局中的變幻方式很多，我們繼續了解一個左-上下結構的布局分解 左邊結構樹中WViewRow下面有兩個WViewColumn。WViewRow是橫向排列，WViewColumn是縱向排列。 ...
小程序UI設計（10）-巧用模板，事半功倍
工具中為小程序員們准備了符合微信開發規范的模板。之前帖子中介紹的規范都在模板中已經設計好了，可以直接復制粘貼使用。下圖中的樣式是從模板直接復制過來的。實際使用時只要更換為自己的圖片和文字即可。自動生成的wxml和wxss也可以直接使用。從而大大提高了開發效率。 下面是部分模板的展示： ...
（九）微信小程序：電影頁面UI設計
電影頁面UI設計 1.理清邏輯+辨清可復用元素=template <!-- 頁面可復用元素 1.列表電影 movie-list-template ...
微信小程序和App的UI設計有什么異同嗎？
大家總是把小程序和App放在一起比，因此我也花時間看了一下小程序的開發指南，尤其是UI部分的設計和原則，今天就拿它和蘋果的HIG(Human Interface Guidelines)做個比較，其實兩者在一些大的原則處理上可以說是一致的。 關鍵詞一：友好禮貌 對應於蘋果 ...