杏吧app下载,关婷娜被揉胸视频直播,杏吧之春暖花开有你

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) "服務(wù)"
  ["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) "定制開發(fā)-APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["meta_keywords"] => string(75) "APP定制開發(fā),微信定制開發(fā),小程序定制開發(fā),網(wǎng)站定制開發(fā)"
    ["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) "小程序開發(fā)"
      ["thumb"] => string(0) ""
      ["image"] => string(0) ""
      ["desc"] => string(112) "專業(yè)微信小程序解決方案|各種場景核心功能,提前布局微信新生態(tài),搶占第一波紅利"
      ["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) "小程序_商城小程序_門店小程序_微圈小程序_餐飲小程序開發(fā)-藝源科技小程序開發(fā)"
        ["meta_keywords"] => string(103) "小程序開發(fā),商城小程序開發(fā),門店小程序開發(fā),微圈小程序開發(fā),餐飲小程序開發(fā)"
        ["meta_description"] => string(269) "專注提供專注提供小程序、商城小程序、門店小程序、微圈小程序、餐飲小程序開發(fā),專業(yè)團(tuán)隊,一對一服務(wù),助企業(yè)快速生成自己的移動端微商城平臺. 藝源科技小程序采用高性能數(shù)據(jù)架構(gòu),系統(tǒng)穩(wěn)定安全。"
        ["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開發(fā)"
      ["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開發(fā)_app定制開發(fā)_app制作開發(fā)公司【藝源科技】"
        ["meta_keywords"] => string(53) "app開發(fā),app定制開發(fā)公司,app制作開發(fā)公司"
        ["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) "快抖霸屏_抖音快手霸屏_短視頻營銷獲客技術(shù)提供商!"
        ["meta_keywords"] => string(69) "快抖霸屏,抖音快手霸屏,快抖短視頻搜索,同城爆店碼"
        ["meta_description"] => string(161) "藝源智能云推廣系統(tǒng)13325455411專注快抖霸屏,抖音快手霸屏,同城爆店碼,一款線下與線上流量緊密結(jié)合的營銷爆客解決方案。"
        ["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智能名片為企業(yè)提供名片小程序,智能名片,企業(yè)名片,小程序名片,電子名片,二維碼名片等相關(guān)的服務(wù)。"
        ["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) "版權(quán)登記"
      ["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) "商標(biāo)注冊"
      ["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) "商標(biāo)注冊_商標(biāo)注冊流程_商標(biāo)注冊流程及費用_西安商標(biāo)注冊_西安商標(biāo)注冊代理-「源知果」藝源科技"
        ["meta_keywords"] => string(103) "商標(biāo)注冊,商標(biāo)注冊流程,商標(biāo)注冊流程及費用,西安商標(biāo)注冊,西安商標(biāo)注冊代理"
        ["meta_description"] => string(182) "「源知果」西安提供代理版權(quán)登記,代理商標(biāo)注冊,代理專利申請,代理企業(yè)貫標(biāo),代理高新技術(shù)企業(yè)認(rèn)定的服務(wù);咨詢電話: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) "網(wǎng)站建設(shè)"
      ["thumb"] => string(0) ""
      ["image"] => string(63) "/modules/cms/uploads/recommend/2019/06/21/06144566585327511.jpg"
      ["desc"] => string(149) "節(jié)約IT成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款|節(jié)約IT成本/降低運維成本/網(wǎng)站安全穩(wěn)定/不滿意全額退款"
      ["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) "西安商城網(wǎng)站建設(shè)_政府網(wǎng)站建設(shè)_學(xué)校網(wǎng)站建設(shè)就選藝源科技"
        ["meta_keywords"] => string(113) "西安網(wǎng)站建設(shè),西安網(wǎng)絡(luò)公司,西安網(wǎng)頁設(shè)計,商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)"
        ["meta_description"] => string(248) "「藝源科技」是西安一家專業(yè)的西安商城網(wǎng)站建設(shè),政府網(wǎng)站建設(shè),學(xué)校網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,咨詢電話:029-88810146/150 9401 9029。公司擁有10年實踐經(jīng)驗,為您提供一條龍的互聯(lián)網(wǎng)應(yīng)用解決方案。"
        ["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) "云服務(wù)平臺"
      ["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優(yōu)化"
      ["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優(yōu)化_西安網(wǎng)站優(yōu)化_關(guān)鍵詞排名優(yōu)化】-SEO優(yōu)化公司藝源科技"
        ["meta_keywords"] => string(81) "西安SEO優(yōu)化,西安SEO優(yōu)化公司,西安網(wǎng)站優(yōu)化,西安網(wǎng)站優(yōu)化公司"
        ["meta_description"] => string(244) "藝源科技(yysweb.com),專注為企業(yè)提供百度等搜索引擎整站SEO優(yōu)化服務(wù),針對不同行業(yè)、網(wǎng)站情況給出不同策略、報價和SEO建議;是您值得信賴的seo診斷、顧問咨詢等云SEO技術(shù)服務(wù)外包商。"
        ["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
    }
  }
}
				
當(dāng)前位置: 首頁 > 售后 > 藝源智庫
如何開發(fā)好看又好用的小程序?
時間:2020-03-27 09:35:31
文章發(fā)布:李陽
原創(chuàng)作者:未知
來源:互聯(lián)網(wǎng)

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

如何保證小程序的開發(fā)兼顧兩種平臺的界面風(fēng)格,并與微信本身的體驗保持統(tǒng)一呢?

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

為了幫助大家更快地理解設(shè)計文檔,知曉程序(微信號 zxcx0101)專門準(zhǔn)備了這份文檔解讀,不僅將設(shè)計文檔的篇幅濃縮到二分之一,還在文末增加了小程序 UI 設(shè)計與傳統(tǒng)的移動應(yīng)用設(shè)計和網(wǎng)頁設(shè)計的差異比較。

現(xiàn)在,只需花一半的時間看這篇文章,你就能掌握設(shè)計文檔的所有要點。

注:本文主要針對小程序開發(fā)者和 UI 設(shè)計師。如果想零基礎(chǔ)學(xué)習(xí)小程序開發(fā),請繼續(xù)關(guān)注知曉程序(微信號 zxcx0101)的后續(xù)內(nèi)容。

小程序官方設(shè)計文檔解讀

基本規(guī)則

微信小程序設(shè)計文檔將所有的設(shè)計范例分為了四個部分,分別是:

  1. 友好禮貌

  2. 清晰明確

  3. 便捷優(yōu)雅

  4. 統(tǒng)一穩(wěn)定

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

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

知曉程序(微信號 zxcx0101)建議:沒有太多設(shè)計經(jīng)驗的開發(fā)者請盡可能使用微信提供的組件樣式,這樣可以在快速開發(fā)的前提下,保證小程序的用戶體驗。

1. 友好禮貌

微信官方希望小程序?qū)W⒔鉀Q用戶當(dāng)前的問題,做一個「管家」,而非是在用戶處理問題時候,一直制造干擾的「推銷員」。

首先,每一個頁面都應(yīng)該聚焦于某個重點功能,不能與該功能無關(guān)。

例如,搜索頁面的功能應(yīng)該是「搜索」,與搜索無關(guān)的功能或內(nèi)容(如 banner 廣告以及誘導(dǎo)搜索關(guān)鍵詞推廣等)應(yīng)該盡可能去除掉。

 如何開發(fā)好看又好用的小程序?-藝源科技

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

其次,頁面的導(dǎo)航應(yīng)該按照用戶的預(yù)期進(jìn)行。

例如,用戶跳轉(zhuǎn)進(jìn)入一個頁面時,小程序不應(yīng)該彈出與之無關(guān)的廣告,因為廣告不符合用戶進(jìn)入頁面的預(yù)期。

如何開發(fā)好看又好用的小程序?-藝源科技

官方錯誤示例,進(jìn)入頁面彈出與功能無關(guān)廣告

知曉程序(微信號 zxcx0101)建議:小程序設(shè)計時應(yīng)該以快速解決用戶問題為目標(biāo),并為其提供明確且符合預(yù)期的步驟導(dǎo)航。而這與張小龍在演講中提到的「用完即走」的概念是吻合的。

2. 清晰明確

用戶在操作小程序時,小程序應(yīng)該為用戶明示當(dāng)前狀態(tài),同時應(yīng)盡力減少用戶在操作上的限制和等待時間。

微信官方已經(jīng)為小程序提供了全局導(dǎo)航欄,包括導(dǎo)航區(qū)(返回按鈕)、標(biāo)題區(qū)和操作區(qū)三組。

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

如何開發(fā)好看又好用的小程序?-藝源科技

官方提供的底部標(biāo)簽和頂部 Tab 樣式

開發(fā)者可以定義導(dǎo)航欄和頁面內(nèi)導(dǎo)航的風(fēng)格顏色。在定義顏色時,開發(fā)者需要注意元素辨識度,不能出現(xiàn)刺眼、按鈕與文字可視性差的情況。

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

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

如何開發(fā)好看又好用的小程序?-藝源科技

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

微信小程序提供三個結(jié)果提示方式,提示效果從輕至強(qiáng)的分別為小彈窗提示(toast)、模態(tài)框提示(modal)和單獨的成功結(jié)果頁面。開發(fā)者需要根據(jù)實際情況,對不同程度的提示進(jìn)行合理利用。

知曉程序(微信號 zxcx0101)建議:操作反饋時用 toast,詢問行為時用 modal,表單提交后用頁面。

如何開發(fā)好看又好用的小程序?-藝源科技

Toast、Modal 和成功頁面

這份設(shè)計文檔特別強(qiáng)調(diào)了異常情況的設(shè)計。在小程序中,異常情況需要明確告知用戶出現(xiàn)了問題,同時明確告知用戶問題出在哪里、應(yīng)該如何解決。

文檔對表單中填寫出錯情況的提示樣式進(jìn)行了規(guī)定。

如何開發(fā)好看又好用的小程序?-藝源科技

表單錯誤提示示例

如果表單中出現(xiàn)錯誤,小程序應(yīng)該在頂部彈出提示,并在錯誤項目的右側(cè)提供錯誤 icon,以便用戶定位問題。

3. 便捷優(yōu)雅

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

比如,當(dāng)用戶在進(jìn)行輸入時,可以通過聯(lián)想、API 接口以及其他方式(例如掃描銀行卡等),幫助用戶快速準(zhǔn)確地填充輸入內(nèi)容。

如何開發(fā)好看又好用的小程序?-藝源科技

掃描銀行卡快速填充內(nèi)容

在設(shè)計時,應(yīng)該確保用戶的誤操作概率更低。

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

4. 統(tǒng)一穩(wěn)定

在設(shè)計文檔中,有關(guān)于統(tǒng)一穩(wěn)定的說法更傾向于「統(tǒng)一」。即小程序在整體上應(yīng)該要為用戶提供整齊劃一的功能,避免同一種視覺元素中在不同頁面中有不同的樣式。

這樣的原則,有助于保證用戶的認(rèn)知穩(wěn)定性。設(shè)計師在設(shè)計的時候,應(yīng)盡可能避免一個小程序中多種元素風(fēng)格差異較大的情況。這樣既不能保證小程序的視覺統(tǒng)一性,同時也對用戶的認(rèn)知穩(wěn)定造成嚴(yán)重破壞。

知曉程序(微信號 zxcx0101)建議:在開發(fā)過程中,可以將相同的組件的樣式規(guī)定于一個全局 WXSS 文件中,以便開發(fā)時快速復(fù)用并保證視覺統(tǒng)一。

差異比較

如果網(wǎng)頁設(shè)計師或移動應(yīng)用 UI 設(shè)計師轉(zhuǎn)向開發(fā)小程序的話,了解小程序與之前設(shè)計領(lǐng)域的異同是很有必要的。

我們以這份設(shè)計文檔為基礎(chǔ),講解小程序 UI 設(shè)計與傳統(tǒng)的移動應(yīng)用設(shè)計和網(wǎng)頁設(shè)計的差異。

1. 如果你是網(wǎng)頁設(shè)計師

對于網(wǎng)頁設(shè)計師來說,小程序界面設(shè)計最大的挑戰(zhàn)在于以往桌面為先的思維需要轉(zhuǎn)向移動為先,因為作為一款依賴手機(jī)運行的應(yīng)用,微信小程序需要聚焦于移動使用。

移動端與桌面端的區(qū)別在于:

  • 屏幕尺寸與比例。移動設(shè)備的屏幕一般會比桌面設(shè)備的屏幕更小,同時屏幕比例從橫向變成了縱向。

  • 輸入設(shè)備。桌面設(shè)備擁有鼠標(biāo)和鍵盤,而移動設(shè)備上,用于信息輸入的幾乎只有手指。

  • 網(wǎng)絡(luò)特性。桌面端不需要考慮網(wǎng)絡(luò)問題,但在移動設(shè)備上,用戶使用的網(wǎng)絡(luò)可能會有流量限制或速率限制。

因此,知曉程序(微信號 zxcx0101)要提醒網(wǎng)頁設(shè)計師,在設(shè)計小程序界面的時候需要注意這些差異:

  • 多花點功夫在排版上。在移動設(shè)備上使用程序,不像是在電腦上使用那么輕松自在。為小程序的元素和文字進(jìn)行排版時,這些元素和文字應(yīng)適當(dāng)放大,同時加大間距。

  • 避免花哨元素。過于花哨的元素在小屏幕上容易「吸」走用戶的注意力,不符合設(shè)計文檔中的規(guī)范,同時會增加用戶的網(wǎng)絡(luò)流量和載入時間。

  • 注意導(dǎo)航系統(tǒng)設(shè)計。小程序沒有「面包屑」(導(dǎo)航指示器),在設(shè)計的時候需要確保用戶不會在頁面中迷失,同時需要保證用戶的下一步符合其預(yù)期。

  • 多測試。在轉(zhuǎn)換至小程序的初期,強(qiáng)烈建議將設(shè)計原型稿放到真機(jī)進(jìn)行測試和評估。

2. 如果你是移動 UI 設(shè)計師

對于 UI 設(shè)計師來說,小程序帶來了一個好消息和一個壞消息。

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

壞消息:微信原生提供的控件較為有限。微信中只提供了多種按鈕、Toast、提示 icon、開關(guān)、多選框、復(fù)選框和滑塊等幾種控件。其他的控件需要自己根據(jù)實際風(fēng)格進(jìn)行開發(fā)和設(shè)計。

此外,微信小程序的風(fēng)格與 iOS HIG 和 Material Design 兩種設(shè)計范式差異都較大。在設(shè)計時,需要多加注意設(shè)計文檔中的說明和范例,以便設(shè)計出符合標(biāo)準(zhǔn)的小程序界面。

對微信小程序設(shè)計文檔的解讀就到這里為止了。希望通過這份解讀文檔,能幫助開發(fā)者輕松開發(fā)出具有優(yōu)良體驗的小程序。


小程序開發(fā)
標(biāo)簽:
*版權(quán)申明:本站部分文章由藝源科技收集整理,不代表我們的觀點。如果這篇轉(zhuǎn)載侵犯您的版權(quán),請及時聯(lián)系我們刪除!
為您推薦
最新文章
掃碼加他,免費獲取方案