如何開發好看又好用的小程序？

　　

<option id="uausy"></option>

<li id="uausy"></li>

array(23) {
  ["id"] => string(2) "96"
  ["siteid"] => string(1) "1"
  ["type"] => string(1) "1"
  ["m_id"] => string(1) "0"
  ["p_id"] => string(1) "0"
  ["name"] => string(6) "服務"
  ["thumb"] => string(63) "/modules/cms/uploads/recommend/2018/05/15/05797102164099283.png"
  ["image"] => string(0) ""
  ["desc"] => string(0) ""
  ["pdir"] => string(0) ""
  ["dir"] => string(7) "service"
  ["url"] => string(0) ""
  ["setting"] => array(15) {
    ["is_html"] => int(1)
    ["content_is_html"] => int(0)
    ["urlrule"] => int(1)
    ["contenturlrule"] => int(0)
    ["meta_title"] => string(88) "定制開發-APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
    ["meta_keywords"] => string(75) "APP定制開發,微信定制開發,小程序定制開發,網站定制開發"
    ["meta_description"] => string(0) ""
    ["category_template"] => string(0) ""
    ["list_template"] => string(0) ""
    ["show_template"] => string(21) "show_page_dingzhi.tpl"
    ["formid"] => string(0) ""
    ["url"] => string(0) ""
    ["target"] => string(0) ""
    ["pri_grade_visit"] => array(0) {
    }
    ["pri_grade_add"] => array(0) {
    }
  }
  ["order"] => string(1) "1"
  ["sethtml"] => string(1) "0"
  ["stat"] => string(1) "2"
  ["flowid"] => string(1) "0"
  ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2018/05/25/05805654599261264.jpg"
  ["page_num"] => string(1) "0"
  ["wxstat"] => string(1) "0"
  ["scope"] => string(0) ""
  ["modelname"] => NULL
  ["son"] => array(9) {
    [0] => array(22) {
      ["id"] => string(3) "187"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "小程序開發"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業微信小程序解決方案|各種場景核心功能，提前布局微信新生態，搶占第一波紅利"
      ["pdir"] => string(0) ""
      ["dir"] => string(6) "wechat"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(107) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發-藝源科技小程序開發"
        ["meta_keywords"] => string(103) "小程序開發,商城小程序開發,門店小程序開發,微圈小程序開發,餐飲小程序開發"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發，專業團隊,一對一服務,助企業快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數據架構,系統穩定安全。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_xcx.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "0"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "1"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [1] => array(22) {
      ["id"] => string(3) "199"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "APP開發"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "APP"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(65) "app開發_app定制開發_app制作開發公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發,app定制開發公司,app制作開發公司"
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_app.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "1"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [2] => array(22) {
      ["id"] => string(3) "244"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "快抖霸屏"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "kuaidou"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(71) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術提供商！"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結合的營銷爆客解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(20) "show_page_douyin.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "2"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(27) "需要短視頻推廣排名"
      ["modelname"] => NULL
    }
    [3] => array(22) {
      ["id"] => string(3) "207"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(14) "AI智能名片"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/07/04/06155550417466502.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(2) "ai"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(68) "藝源AI智能名片_名片小程序_智能名片_讓銷售更簡單"
        ["meta_keywords"] => string(97) "藝源AI智能名片,名片小程序,智能名片_讓銷售更簡單,電子名片,二維碼名片"
        ["meta_description"] => string(184) "藝源AI智能名片-讓銷售更簡單。藝源AI智能名片為企業提供名片小程序,智能名片,企業名片,小程序名片,電子名片,二維碼名片等相關的服務。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(16) "show_page_ai.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "3"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [4] => array(22) {
      ["id"] => string(3) "201"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "版權登記"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814062280145708.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "copyright"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_copyright.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "4"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/04/06814063838873717.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [5] => array(22) {
      ["id"] => string(3) "203"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "商標注冊"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813359170749750.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(9) "trademark"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(131) "商標注冊_商標注冊流程_商標注冊流程及費用_西安商標注冊_西安商標注冊代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標注冊,商標注冊流程,商標注冊流程及費用,西安商標注冊,西安商標注冊代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權登記，代理商標注冊，代理專利申請，代理企業貫標，代理高新技術企業認定的服務；咨詢電話：13325455411。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(23) "show_page_trademark.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "5"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/11/06135617157272716.png"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [6] => array(22) {
      ["id"] => string(3) "205"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(12) "網站建設"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款|節約IT成本/降低運維成本/網站安全穩定/不滿意全額退款"
      ["pdir"] => string(0) ""
      ["dir"] => string(7) "website"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(80) "西安商城網站建設_政府網站建設_學校網站建設就選藝源科技"
        ["meta_keywords"] => string(113) "西安網站建設,西安網絡公司,西安網頁設計,商城網站建設,政府網站建設,學校網站建設"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業的西安商城網站建設,政府網站建設,學校網站建設的網絡公司，咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經驗,為您提供一條龍的互聯網應用解決方案。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(21) "show_page_website.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "6"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2019/06/24/06146855992801864.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [7] => array(22) {
      ["id"] => string(3) "208"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "2"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(15) "云服務平臺"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(0) ""
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(0)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(0)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(0) ""
        ["meta_keywords"] => string(0) ""
        ["meta_description"] => string(0) ""
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(0) ""
        ["formid"] => string(0) ""
        ["url"] => string(21) "http://www.qulvkj.com"
        ["target"] => string(6) "_blank"
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "7"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(0) ""
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
    [8] => array(22) {
      ["id"] => string(3) "202"
      ["siteid"] => string(1) "1"
      ["type"] => string(1) "1"
      ["m_id"] => string(1) "0"
      ["p_id"] => string(2) "96"
      ["name"] => string(9) "SEO優化"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813061683398516.jpg"
      ["desc"] => string(0) ""
      ["pdir"] => string(0) ""
      ["dir"] => string(3) "seo"
      ["url"] => string(0) ""
      ["setting"] => array(15) {
        ["is_html"] => int(1)
        ["content_is_html"] => int(0)
        ["urlrule"] => int(1)
        ["contenturlrule"] => int(0)
        ["meta_title"] => string(90) "【西安SEO優化_西安網站優化_關鍵詞排名優化】-SEO優化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優化,西安SEO優化公司,西安網站優化,西安網站優化公司"
        ["meta_description"] => string(244) "藝源科技（yysweb.com）,專注為企業提供百度等搜索引擎整站SEO優化服務,針對不同行業、網站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術服務外包商。"
        ["category_template"] => string(0) ""
        ["list_template"] => string(0) ""
        ["show_template"] => string(17) "show_page_seo.tpl"
        ["formid"] => string(0) ""
        ["url"] => string(0) ""
        ["target"] => string(0) ""
        ["pri_grade_visit"] => array(0) {
        }
        ["pri_grade_add"] => array(0) {
        }
      }
      ["order"] => string(1) "8"
      ["sethtml"] => string(1) "0"
      ["stat"] => string(1) "2"
      ["flowid"] => string(1) "0"
      ["image_mo"] => string(63) "/modules/cms/uploads/recommend/2021/08/03/06813062712033401.jpg"
      ["page_num"] => string(1) "0"
      ["wxstat"] => string(1) "0"
      ["scope"] => string(0) ""
      ["modelname"] => NULL
    }
  }
}

當前位置：首頁 > 售后 > 藝源智庫

如何開發好看又好用的小程序？

時間：2020-03-27 09:35:31

文章發布：李陽

原創作者：未知

來源：互聯網

從微信、公眾賬號、到微信支付，再到小程序，微信正逐漸將自己從一個「即時通訊工具」變成一個「操作系統」。但特殊的是，微信這個跨平臺操作系統需要同時兼顧 iOS 及 Android 兩套 UI 標準。

如何保證小程序的開發兼顧兩種平臺的界面風格，并與微信本身的體驗保持統一呢？

閱讀微信官方的設計文檔是最有效的方式，里面提供了大量的用戶界面實例，開發者只需嚴格依據這份設計文檔，就可以做出兼具美觀、實用的 UI 與交互模式。

為了幫助大家更快地理解設計文檔，知曉程序（微信號 zxcx0101）專門準備了這份文檔解讀，不僅將設計文檔的篇幅濃縮到二分之一，還在文末增加了小程序 UI 設計與傳統的移動應用設計和網頁設計的差異比較。

現在，只需花一半的時間看這篇文章，你就能掌握設計文檔的所有要點。

注：本文主要針對小程序開發者和 UI 設計師。如果想零基礎學習小程序開發，請繼續關注知曉程序（微信號 zxcx0101）的后續內容。

小程序官方設計文檔解讀

基本規則

微信小程序設計文檔將所有的設計范例分為了四個部分，分別是：

友好禮貌
清晰明確
便捷優雅
統一穩定

除此之外，微信官方還提供了一些便于開發者使用的組件，這些組件可以在微信官方的小程序 IDE 中直接使用。

設計文檔也針對這部分組件進行了詳細說明，包括每個組件的適用范圍。同時，還提供了 Sketch 與 Photoshop 的設計模板，便于 UI 設計師直接使用。

知曉程序（微信號 zxcx0101）建議：沒有太多設計經驗的開發者請盡可能使用微信提供的組件樣式，這樣可以在快速開發的前提下，保證小程序的用戶體驗。

1. 友好禮貌

微信官方希望小程序專注解決用戶當前的問題，做一個「管家」，而非是在用戶處理問題時候，一直制造干擾的「推銷員」。

首先，每一個頁面都應該聚焦于某個重點功能，不能與該功能無關。

例如，搜索頁面的功能應該是「搜索」，與搜索無關的功能或內容（如 banner 廣告以及誘導搜索關鍵詞推廣等）應該盡可能去除掉。

如何開發好看又好用的小程序？-藝源科技

官方錯誤示例，在搜索頁中添加無用信息

其次，頁面的導航應該按照用戶的預期進行。

例如，用戶跳轉進入一個頁面時，小程序不應該彈出與之無關的廣告，因為廣告不符合用戶進入頁面的預期。

如何開發好看又好用的小程序？-藝源科技

官方錯誤示例，進入頁面彈出與功能無關廣告

知曉程序（微信號 zxcx0101）建議：小程序設計時應該以快速解決用戶問題為目標，并為其提供明確且符合預期的步驟導航。而這與張小龍在演講中提到的「用完即走」的概念是吻合的。

2. 清晰明確

用戶在操作小程序時，小程序應該為用戶明示當前狀態，同時應盡力減少用戶在操作上的限制和等待時間。

微信官方已經為小程序提供了全局導航欄，包括導航區（返回按鈕）、標題區和操作區三組。

如果開發者有需要，可以在小程序的首頁中使用頁面內導航，包括頂部 Tab 樣式和底部標簽樣式。每種樣式至少需要兩個標簽，最多不能超過五個標簽，而微信官方給出建議是最多不要超過四個。

如何開發好看又好用的小程序？-藝源科技

官方提供的底部標簽和頂部 Tab 樣式

開發者可以定義導航欄和頁面內導航的風格顏色。在定義顏色時，開發者需要注意元素辨識度，不能出現刺眼、按鈕與文字可視性差的情況。

小程序中的加載反饋細節也是影響整體體驗的重要部分。微信提供了一個下拉刷新組件，只需要按照要求套用即可。

同時，頁面內的加載提示推薦使用局部加載反饋而非全局加載反饋。加載時間較長時，建議提供進度條以減緩用戶等待的焦灼感。

如何開發好看又好用的小程序？-藝源科技

下拉刷新樣式和局部加載示例

微信小程序提供三個結果提示方式，提示效果從輕至強的分別為小彈窗提示（toast）、模態框提示（modal）和單獨的成功結果頁面。開發者需要根據實際情況，對不同程度的提示進行合理利用。

知曉程序（微信號 zxcx0101）建議：操作反饋時用 toast，詢問行為時用 modal，表單提交后用頁面。

如何開發好看又好用的小程序？-藝源科技

Toast、Modal 和成功頁面

這份設計文檔特別強調了異常情況的設計。在小程序中，異常情況需要明確告知用戶出現了問題，同時明確告知用戶問題出在哪里、應該如何解決。

文檔對表單中填寫出錯情況的提示樣式進行了規定。

如何開發好看又好用的小程序？-藝源科技

表單錯誤提示示例

如果表單中出現錯誤，小程序應該在頂部彈出提示，并在錯誤項目的右側提供錯誤 icon，以便用戶定位問題。

3. 便捷優雅

微信官方希望小程序可以敏捷地解決問題。

比如，當用戶在進行輸入時，可以通過聯想、API 接口以及其他方式（例如掃描銀行卡等），幫助用戶快速準確地填充輸入內容。

如何開發好看又好用的小程序？-藝源科技

掃描銀行卡快速填充內容

在設計時，應該確保用戶的誤操作概率更低。

微信官方在文檔中提到，可點擊元素應該要保證足夠大，以便用戶能夠有明確的點擊反饋。但知曉程序（微信號 zxcx0101）提醒，文案及 icon 不讓用戶困惑也是減少誤操作的重要方式之一。

4. 統一穩定

在設計文檔中，有關于統一穩定的說法更傾向于「統一」。即小程序在整體上應該要為用戶提供整齊劃一的功能，避免同一種視覺元素中在不同頁面中有不同的樣式。

這樣的原則，有助于保證用戶的認知穩定性。設計師在設計的時候，應盡可能避免一個小程序中多種元素風格差異較大的情況。這樣既不能保證小程序的視覺統一性，同時也對用戶的認知穩定造成嚴重破壞。

知曉程序（微信號 zxcx0101）建議：在開發過程中，可以將相同的組件的樣式規定于一個全局 WXSS 文件中，以便開發時快速復用并保證視覺統一。

差異比較

如果網頁設計師或移動應用 UI 設計師轉向開發小程序的話，了解小程序與之前設計領域的異同是很有必要的。

我們以這份設計文檔為基礎，講解小程序 UI 設計與傳統的移動應用設計和網頁設計的差異。

1. 如果你是網頁設計師

對于網頁設計師來說，小程序界面設計最大的挑戰在于以往桌面為先的思維需要轉向移動為先，因為作為一款依賴手機運行的應用，微信小程序需要聚焦于移動使用。

移動端與桌面端的區別在于：

屏幕尺寸與比例。移動設備的屏幕一般會比桌面設備的屏幕更小，同時屏幕比例從橫向變成了縱向。
輸入設備。桌面設備擁有鼠標和鍵盤，而移動設備上，用于信息輸入的幾乎只有手指。
網絡特性。桌面端不需要考慮網絡問題，但在移動設備上，用戶使用的網絡可能會有流量限制或速率限制。

因此，知曉程序（微信號 zxcx0101）要提醒網頁設計師，在設計小程序界面的時候需要注意這些差異：

多花點功夫在排版上。在移動設備上使用程序，不像是在電腦上使用那么輕松自在。為小程序的元素和文字進行排版時，這些元素和文字應適當放大，同時加大間距。
避免花哨元素。過于花哨的元素在小屏幕上容易「吸」走用戶的注意力，不符合設計文檔中的規范，同時會增加用戶的網絡流量和載入時間。
注意導航系統設計。小程序沒有「面包屑」（導航指示器），在設計的時候需要確保用戶不會在頁面中迷失，同時需要保證用戶的下一步符合其預期。
多測試。在轉換至小程序的初期，強烈建議將設計原型稿放到真機進行測試和評估。

2. 如果你是移動 UI 設計師

對于 UI 設計師來說，小程序帶來了一個好消息和一個壞消息。

好消息：移動 UI 中的設計思維和范式，絕大部分都能用在小程序設計上，且設計師不需要為 iOS 與 Android 分別設計界面，只需將有差異的部分進行分情況討論即可。

壞消息：微信原生提供的控件較為有限。微信中只提供了多種按鈕、Toast、提示 icon、開關、多選框、復選框和滑塊等幾種控件。其他的控件需要自己根據實際風格進行開發和設計。

此外，微信小程序的風格與 iOS HIG 和 Material Design 兩種設計范式差異都較大。在設計時，需要多加注意設計文檔中的說明和范例，以便設計出符合標準的小程序界面。

對微信小程序設計文檔的解讀就到這里為止了。希望通過這份解讀文檔，能幫助開發者輕松開發出具有優良體驗的小程序。

小程序開發

標簽：

*版權申明:本站部分文章由藝源科技收集整理，不代表我們的觀點。如果這篇轉載侵犯您的版權，請及時聯系我們刪除！

返回

↑ 上一篇：【網站建設】網站制作流程是什么樣的？

↓ 下一篇：網站關停后，為什么必須要注銷備案信息？

為您推薦

最新文章

免費獲取解決方案

您有需求，剛好我們很專業！為您服務是我們的榮幸！
藝源為您提供專業的藝源為您提供專業的軟件開發，系統開發，App開發，小程序開發，微信小程序開發等互聯網+解決方案

藝源為您提供專業的軟件開發，系統開發，App開發，小程序開發，微信小程序開發

7x24h
24h全面監控服務器

安全保障,高頻度系統安全更新-藝源科技

安全保障
高頻度系統安全更新

全面服務,域名備案、營銷指導-藝源科技

全面服務
域名備案、營銷指導

定時訪問,主動回訪了解客戶需求-藝源科技

定時訪問
主動回訪了解客戶需求

友情鏈接：合作伙伴投訴建議站內地圖我要應聘企業郵箱免責聲明

Have Requests?

國家高新技術企業：GR202461001382

您有需求，剛好我們很專業！為您服務是我們的榮幸！
優質的設計瞬間奪人眼球，而扎實的技術實力需要經年默默積累，看得到的看不到的我們都努力做到最好！

微信小程序開發-藝源聯系地址

Address

西安市高新區唐延路11號，i都會。

APP開發-藝源聯系電話

Phones

①150 9401 9029 ②133 2545 5411

網站開發-藝源電子郵件

E-mail

sales@yysweb.com

微信開發-藝源官網微信公眾號

Wechat

官方微信公眾號 & 產品經理

藝源官網微信公眾號

久久青草费线频观看地址_少妇久久久久久久久久_亚洲欧洲自拍拍偷午夜色_国产sm重味一区二区三区

<option id="uausy"></option>

<li id="uausy"></li>