[转】微信小游戏设计指南
概要小游戏,是传统游戏的一种新的表现形式,它可以是故事,是价值观,是开发者和玩家一起进行创造的载体。基于小游戏轻便快捷、便与传播的特点,我们拟定了小游戏界面设计指南和建议,旨在帮助小游戏开发者创造更优秀的游戏产品,同时给玩家更好的游戏体验。
流程清晰
整个小游戏应有清晰的流程,方便玩家在各个页面之间自如切换,不受干扰或阻碍。页面之间的逻辑关系应该简单明了,确保玩家在游戏内不会迷路或感到无助。
下图的是在玩一个小游戏时,玩家比较常见的操作流程,开发者可结合自身游戏的特点设计页面间的跳转逻辑,这些页面包括但不限于:开始页、游戏主界面、结算页、排行榜页、分享卡片等。
界面设计合理
在进行游戏界面设计时,页面结构和界面布局的好坏将会直接影响玩家的操作体验。我们基于小游戏用户数据进行了分析,大部分用户屏幕分辨率比例为 16:9,综合屏幕分辨率占有率和设计稿通用性的考虑,我们建议开发者选择 4.7 寸屏幕的 750x1334 作为设计稿基准值。
设备兼容性
游戏开发者应关注不同设备、不同操作系统的使用场景,采取兼容适配方案来保障玩家获得最佳体验。使用 750×1334 的基准值,并以此对其他设备尺寸进行兼容,对于特殊屏幕设备,如:全面屏、刘海屏、异形屏,可专门提供独立的兼容方案进行优化。
易操作
手机操作中绝大部分交互场景是由拇指完成的,开发者在界面设计和布局时,应优先考虑易操作性,让界面操作更人性化。
功能热区
结合拇指热区,我们可以将游戏界面划分为不同的功能区:主要功能区、次级功能区、辅助展示区、广告区等,开发者可根据不同组件的权重进行合理布局。
广告内容
常见的广告内容可放置于界面底部,开发者应选择合适的缩放比例,保障广告 Banner 展示效果的同时,也兼顾到玩家的体验。相关广告规范的细节请参看 《小游戏广告应用规范及违规处罚》 ,兼容适配相关请参看 《小游戏 Banner 广告流量量主指引》
主次分明
每个页面都应明确其目标,展示重点内容,减少无关的设计元素对玩家目标的干扰。我们以开始页和结算页为例:
开始页
开始页作为玩家打开的第一个页面,能否留住玩家显得尤为重要。明确玩家的首要目标是快速了解并进行游戏,建议使用直观明了的呈现形式。另外,对于有一定上手门槛的游戏玩法,可以提供适当的新手引导内容。
结算页
结算页负责承上启下,对上局游戏进行总结,展示相关结果内容,然后再引导玩家进行后续操作,如:“再玩一局”、“排行榜”等。
排行榜页
排行榜页旨在帮助玩家快速了解自己与其他玩家的排名情况。开发者应描述清楚排行榜的性质和维度,例如:好友排行榜、世界排行榜、周排行榜、特殊玩法排行榜等。对于玩家自己的分数建议单独展示,方便其查看。排行榜条目数量应有所控制,不建议使用分页等方式加载全部内容,以免影响阅读体验。
谨慎选择内容元素
每个界面承载的元素不宜过多,以免过于杂乱干扰玩家的选择,应有所取舍。
按钮元素
游戏中的按钮元素最为常见,如:按钮、图标、挂件等。应避免全部平铺展示,可根据玩家的特点做差异化的展示,有选择性的进行隐藏,层层递进。
分享卡片
开发者应正确使用分享卡片的能力,分享图片和文案应服务于游戏内容本身,帮助用户理解跳转后的情景,切勿做诱导分享之用,更多细节请参看 《小游戏发布内容规范》 。
个性鲜明
风格一致
除了以上各项原则,开发者设计游戏时应保持整体风格一致,如:元素尺寸、配色方案、UI 样式、交互体验等,逐渐形成一套自己特有的设计理念,应用于各个页面,给玩家带来更佳沉浸的游戏体验。
创意设计
每个小游戏都应有自己的品牌。我们建议开发者结合自身小游戏的特点,从核心玩法、美术表现、剧情设定、音乐音效和整体完成度等方面进行创意性设计,给玩家创造更多的记忆点和传播欲。对于创意小游戏,官方也给予了四项鼓励措施,详见 《微信小游戏创意鼓励计划》 。
绛旓細鏁翠釜灏忔父鎴搴旀湁娓呮櫚鐨勬祦绋嬶紝鏂逛究鐜╁鍦ㄥ悇涓〉闈箣闂磋嚜濡傚垏鎹紝涓嶅彈骞叉壈鎴栭樆纰嶃傞〉闈箣闂寸殑閫昏緫鍏崇郴搴旇绠鍗曟槑浜嗭紝纭繚鐜╁鍦ㄦ父鎴忓唴涓嶄細杩疯矾鎴栨劅鍒版棤鍔┿備笅鍥剧殑鏄湪鐜╀竴涓皬娓告垙鏃讹紝鐜╁姣旇緝甯歌鐨勬搷浣滄祦绋嬶紝寮鍙戣呭彲缁撳悎鑷韩娓告垙鐨勭壒鐐璁捐椤甸潰闂寸殑璺宠浆閫昏緫锛岃繖浜涢〉闈㈠寘鎷絾涓嶉檺浜庯細寮濮嬮〉銆佹父鎴忎富鐣岄潰銆佺粨绠...
绛旓細1. 娉ㄥ唽鎴愪负寰俊灏忔父鎴寮鍙戣咃細棣栧厛锛屾偍闇瑕佸湪寰俊鍏紬骞冲彴娉ㄥ唽璐﹀彿锛屽苟鐧诲綍鍚庤繘琛屽紑鍙戣呰韩浠界殑璁よ瘉銆2. 鑾峰彇灏忔父鎴廇PPID锛氬湪寰俊鍏紬骞冲彴鐨勨滃紑鍙戔濊彍鍗曚笅锛岃繘鍏モ滃紑鍙戣缃濋〉闈紝鎸夌収姝ラ鑾峰彇鎮ㄧ殑寰俊灏忔父鎴廇PPID銆3. 閫夋嫨寮鍙戝伐鍏凤細閫夌敤鍚堥傜殑寮鍙戝伐鍏凤紝渚嬪寰俊寮鍙戣呭伐鍏凤紝涓嬭浇骞跺畨瑁呭湪鎮ㄧ殑璁$畻鏈轰笂銆
绛旓細鍥涖佺紪鍐欎唬鐮佷笌娴嬭瘯浼樺寲 鏈変簡璁捐鍜岀紪绋嬪熀纭锛岀幇鍦ㄦ槸鏃跺欏姩鎵嬬紪鍐欎唬鐮佷簡銆傜粏蹇冪紪鍐欐瘡涓琛屼唬鐮侊紝纭繚閫昏緫娓呮櫚銆傛祴璇曞拰浼樺寲鏄父鎴忔垚鍔熺殑鍏抽敭锛屼笉鏂皟鏁寸粏鑺傦紝鎻愬崌鐢ㄦ埛浣撻獙銆備簲銆佹帴鍏寰俊骞冲彴骞舵帹骞 鏈鍚庯紝灏嗕綘鐨灏忔父鎴鎺ュ叆寰俊骞冲彴锛屽埄鐢ㄥ叾搴炲ぇ鐨勭敤鎴峰熀纭杩涜鎺ㄥ箍銆備汉浜虹鐨勪竴閿垎浜姛鑳借兘澶уぇ绠鍖栬繖涓楠わ紝璁╀綘...
绛旓細寰俊灏忔父鎴寮鍙戞祦绋嬶細鍑嗗宸ヤ綔锛氭敞鍐屽井淇″皬娓告垙寮鍙戣呰处鍙凤紝瀹夎寮鍙戝伐鍏凤紝鍒涘缓娓告垙椤圭洰銆璁捐娓告垙锛氱‘瀹氭父鎴忕被鍨嬨佹父鎴忕帺娉曘佹父鎴忚鍒欍佹父鎴忓叧鍗$瓑銆傜紪鍐欎唬鐮侊細浣跨敤JavaScript璇█缂栧啓娓告垙閫昏緫銆佺晫闈㈣璁$瓑浠g爜銆傝皟璇曟祴璇曪細浣跨敤寰俊寮鍙戣呭伐鍏疯繘琛屾祴璇曞拰璋冭瘯锛岀‘淇濇父鎴忕ǔ瀹氳繍琛屻傚彂甯冧笂绾匡細瀹屾垚娴嬭瘯鍚庯紝灏嗘父鎴忔彁浜ゅ...
绛旓細鍙備笌鏉′欢绛夈傚畬鎴愯繖浜涜缃悗锛屼綘鐨勫垢杩愬ぇ杞洏灏忔父鎴忓氨鍩烘湰瀹屾垚浜嗐傚嵆浣挎槸鍒濇鎺ヨЕ姝ょ被鍒朵綔鐨勭敤鎴凤紝鍊熷姪杩欑被宸ュ叿涔熻兘杞绘澗蹇熷湴鍒涘缓鍑鸿嚜宸辩殑寰俊鎶藉娲诲姩銆傛荤殑鏉ヨ锛岄氳繃h5椤甸潰鍒朵綔宸ュ叿锛屾棤璁烘槸涓撲笟寮鍙戣呰繕鏄柊鎵嬶紝閮借兘渚挎嵎鍦板埗浣滃嚭涓у寲鐨勫垢杩愬ぇ杞洏寰俊灏忔父鎴锛屼负浣犵殑钀ラ攢娲诲姩澧炴坊涓浠戒箰瓒e拰鍚稿紩鍔涖
绛旓細1銆佸埗浣滄父鎴忓墠闇瑕佺粰鑷繁鐨勬父鎴忓畾浣嶃傚湪鑷繁鍔ㄦ墜鍒朵綔娓告垙鍓,闇瑕佸厛鍋氫笅璁″垝,缁欒嚜宸辩殑娓告垙瀹氫綅銆傛槸澶у瀷娓告垙杩樻槸灏忔父鎴,娓告垙鐨勭绫绘槸閭g,鏈夊姩浣溿佸啋闄┿佷紤闂茬瓑銆傝繖涓璁捐濂藉悗,鎵嶈兘寮濮嬩笅涓姝ョ殑娓告垙鍓ф儏鐨勮璁°2銆佽璁¤嚜宸辩殑娓告垙鍓ф儏銆傛瘡涓父鎴忛兘鏈夎嚜宸辩殑鍓ф儏鍜屼汉鐗╄儗鏅,鏍规嵁鑷繁鎯虫硶,璁捐鑷繁鐨勬父鎴忓墽鎯呫
绛旓細h5灏忔父鎴鏄庝箞鍒朵綔鐨?1銆佹悳闆嗗拰瑙傛煡鍚岃涓氬啓浣滅殑鐭ュ悕鍝佺墝h5娓告垙鍒朵綔鐨勫疄渚,浠ユ墿瀹藉ぇ瀹剁殑瑙嗙嚎骞舵縺璧峰ぇ瀹剁殑璁捐鐏垫劅銆2銆佽瀺鍚堜富棰樻椿鍔ㄤ富棰樹互鏄庣‘鎻愬嚭蹇靛ご,骞跺埗浣滆惀閿娓告垙鐨勬柟妗堢瓥鍒掑浘銆傚湪鎴戜滑鏄庣‘鎻愬嚭璁炬兂鏃,璇峰綋蹇冨湪娓告垙閲岄潰缃叆涓婚娲诲姩鐨勫厓绱犲強鏂囧寲,浠ゅ叾鍏舵洿涓哄悎鐞嗐3銆佷緷鎹柟妗堢瓥鍒掑浘鎻愬墠鍑嗗h5娓告垙闇瑕...
绛旓細1. 棣栧厛锛屼綘闇瑕佹湁涓瀹氱殑缂栫▼鎶鑳斤紝鍥犱负浣犻渶瑕佺紪鍐欎唬鐮佹潵瀹炵幇娓告垙鐨勫姛鑳姐備綘鍙互浣跨敤寰俊鐨勫紑鍙戝伐鍏凤紝涔熷彲浠ヤ娇鐢ㄥ叾浠栫殑缂栫▼璇█锛屾瘮濡侸avaScript锛屾潵瀹炵幇娓告垙鐨勫姛鑳姐2. 鍏舵锛屼綘闇瑕佹湁涓瀹氱殑璁捐鑳藉姏锛屽洜涓轰綘闇瑕璁捐娓告垙鐨勭晫闈紝浠ュ強娓告垙鐨勭帺娉曘備綘鍙互浣跨敤寰俊鐨勮璁″伐鍏凤紝涔熷彲浠ヤ娇鐢ㄥ叾浠栫殑璁捐杞欢锛屾瘮濡...
绛旓細寰俊灏忔父鎴璁剧疆锛氳幏鍙朅ppID锛岄厤缃父鎴忚祫婧怌DN锛岄」鐩悕绉帮紝閫夋嫨妯珫灞忔ā寮忥紝鎸囧畾瀵煎嚭璺緞銆傚鍏nity鍒板井淇″皬娓告垙椤圭洰锛氫粠Unity Hub涓嬭浇椤圭洰锛屽鍏ュ井淇″皬娓告垙妯℃澘锛岀紪杈戝櫒娴嬭瘯鏃堕渶娉ㄦ剰鍙兘閬囧埌鐨勫紓甯搞傚井淇″紑鍙戣呭伐鍏峰父瑙侀棶棰橈細SyntaxError: Unexpected token 'var' 鈥 杩欏彲鑳芥槸璇硶閿欒锛岄渶妫鏌ヤ唬鐮併'webgl....
绛旓細鎰忔淳Epub360-涓撲笟鐨凥5椤甸潰鍒朵綔宸ュ叿 鎰忔淳 Epub360 灞炰簬涓撲笟绾у埆鐨凥5鍒朵綔缃戠珯锛岃兘瀹炵幇 浜や簰鍔ㄧ敾鏁堟灉锛涜緝楂樼骇鐨勪氦浜掕瀹氾紝姣斿鎵嬪娍瑙﹀彂銆佹憞涓鎽囥佹嫋鎷戒氦浜掋佺鎾炴娴嬨侀噸鍔涙劅搴斻佸叧鑱旀帶鍒剁瓑锛涘悓鏃舵敮鎸佺敤鎴蜂俊鎭幏鍙栵紝鍖呮嫭鏄电О澶村儚銆佹媿鐓с佸綍闊崇瓑鍔熻兘锛岀粨鍚堟姇绁ㄣ佽瘎璁恒佸姪鍔涖佷俊鎭垪琛ㄧ粍浠讹紝杞绘澗瀹炵幇绀句氦浜掑姩绫籋5璁捐...