android图片热区

Ⅰ 移动APP的常见的几种导航形式

当确定了APP的设计需求和产品的整体结构之后，要着手开始规划和制作APP的原型及UI界面。一款APP的好与不好，很大部分取决于APP界面布局的合理性。这个时候就要想以最优的设计结构将APP的内容展现给用户，那么，如何将信息以最优的形式展现出来呢？这就涉及到了APP的导航应用方式，可以说一个优秀的导航设计对一款App的核心体验起到了决定性的作用！

知道了导航的重要性，在考虑导航设计时，需要注意以下事项：

1.可达性：

移动应用的导航功能可以说是所有界面最重要的组成部分，因此一定要保证其可达性，并把最关键的要素尽量突出，同时不要影响到内容本身。

2.目的性：

确保导航中的每个按钮要素简单明了，有明确的引导用户点击的目的性。让用户一看就知道是什么意思以及操作结果是什。不要弄的太过花哨，这样反而会让迷惑用户，起到反作用。

3.易于理解：

如果想设计比较高级的导航功能（例如链接图片、允许滑动或其他手势导航，或者访问隐藏菜单），请务必在设计过程中保证前后一致，以便用户熟悉你所使用的模式，同时还应加入一些额外的信息（例如小箭头、文字或改变颜色或高亮等）来吸引用户注意力，并以微妙的方式对用户进行引导。不要给用户呈上“看得见摸不着的导航功能”。

4.通用性

导航功能应当以一定的形式显示于移动应用的各个界面。各个导航模式不一定要完全相同，但其基本结构应当在应用内保持一致，可以根据背景进行小幅度的调整。

明确上述几点注意事项后，将APP的信息结构分层，把主要、最核心、最根本的功能放在第一层级，次要内容放在第二层级甚至更深。然后根据层级关系、结构关系确定导航的形式。

结合产品的深度和广度来共同探讨一下目前APP界面常见的几种导航形式，并分析其优缺点，从而进一步判断每一种导航形式更适合应用于哪种类型的APP！

标签式导航，也就是常说的Tab式导航。是目前应用最广泛、最常见的导航形式。

标签式导航可分为 顶部标签式导航、底部标签式、舵式导航（底部扩展式导航）。

顶部标签式导航

顶部标签式导航顾名思义，存在于页面的顶部。顶部标签导航多应用于Android平台，因其平台特性，底部含有虚拟的物理按键，如华为手机存在手机屏幕内的物理按键。

很多App为了适配安卓平台，采用了顶部标签式导航，目的是为了不与底部虚拟按钮组合在一起产生的信息堆叠和误操作，这也是一种妥协行为。但不断升级的Android平台app现如今也和ios尽量保持一致。

不过也有很多ios平台根据产品结构应用此类型的导航。

上图是虾米音乐app首页导航模式，采用了顶部标签式导航。这样设计是为了 更多展示标签下的内容，还有一点是支持快捷操作 。方便展示/点击下方快捷区域的内容和按钮（当前曲目、歌手、播放/暂停和下一曲）。

底部标签式导航

底部标签式导航是最常用的导航形式，一般存在于页面底端，不超过5个模块。

如果应用需要用户 频繁的在不同分页切换 ，可以采用这种导航，如上图微信最新版的APP界面设计图。这种导航栏符合拇指操作热区。

舵式导航（底部扩展式导航）

舵式导航是底部导航的一种扩展形式，是一种变体。因为它的样式很像轮船上用来指挥的船舵，两侧是其他操作按钮。

当页面有处于同一层级的几大部分内容，同时又需要一个非常重要且频繁操作的入口 ，就可以采用这种APP导航模式。 中间项标签不紧操作最频繁，最重要，且需要引人注意，方便寻找 。

左图为懒人听书App，右图为新浪微博手机客户端。两款App的主要功能都采用了舵式导航的布局方式，将操作最频繁的按钮进行特殊处理，在视觉设计上突出，与导航上的其他按钮进行区分，引导用户操作。

顶部导航+底部导航（双导航模式）

今日头条和网易新闻这种新闻类APP，由于内容、分类较多，运用顶部和底部双tab导航，而切换频率最高的tab放在顶部，这是为什么呢？因为新闻在每个tab都是沉浸式阅读，最常用的操作是在一个tab中不断地下滑阅读内容，将常用的tab放在顶部，向左或向右滑动切换tab的手势操作，能带来更好地阅读体验。

在两种情况下可以选择顶部tab式导航：某项功能必须固定在底部，那么其他tab只能固定在顶部，但为了方便操作，顶部tab导航最好支持手势操作，即滑动即可切换;该APP是沉浸式体验，如新闻、小说等，为了带给用户更好的阅读体验，可以将tab放在顶部。

实际上，底部Tab模式导航在iOS和Android上一直是最安全的一种导航模式，他不怎么出彩，但是绝对不会犯错。在大屏幕时代，底部Tab模式的导航更能适应，也更好设计。

适用于：

入口分类数目不多，可以控制在5个以内，且用户需要在入口间频繁切换来执行多个任务

注意：

结构太过复杂而且不稳定的应用不适合标签式导航。

抽屉式导航模式一般采用将导航主体隐藏在app侧边的方式，以一个按钮来呼出导航，在使用完成之后在使用相同的按钮隐藏起来。一拉一缩，从形象上与抽屉类似，因此称之为抽屉式导航。

抽屉式导航的核心思路是“隐藏”。隐藏非核心的操作与功能，让用户更专注于核心的功能操作上去。 设想你的产品信息层级有非常多的页面和内容，难以在一屏内显示全部内容，那么你一定首先会想到去设计一个底部或顶部的tab导航，但导航太多无疑显得臃肿，而且使用户难以点击，那么这个时候，抽屉式导航是个不错的选择。

抽屉式导航存在几个缺陷：

1.左上角的导按钮存在于单手拇指操作热区难以到达的位置，导致导航按钮难以触达；2.降低了用户对产品一半的参与度；3.可见性低。

有些人认为“现在的APP的发展不仅仅是从前单一的功能，功能随产品的发展变得越来愈多，抽屉式导航已经不适应大多数的产品，这种导航终将被遗弃”。但是，导航栏的使用方式并不是单纯随着看产品的功能增加而不被使用，而是随着整个产品的信息结构和功能形式来设计决定的。抛开产品的功能表现而去讲产品设计是不合理的。

何种情况下适合使用抽屉式导航：

1.如果应用主要的功能和内容都在一个页面里面。只是一些低频操作内容需要显示在其他页面里。为了让主页面看上去干净美观，可以把这些辅助功能放在抽屉栏里。

2.如果应用有不同的视图，且他们是平级的，需要用户同等地对待，抽屉栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。

3.在大屏时代使用抽屉栏，手势操作显得尤为重要，从屏幕边缘唤出抽屉栏是个不错的选择。

注意：

需要用户有一定参与的信息层级，最好不好放置在抽屉栏

跳板／快速启动／宫格导航是将主要入口全部聚合在页面，让用户做出选择。

采用这种导航的应用已经越来越少， 往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。 如下图新浪微博，点击导航栏中间的发布按钮，弹出二级菜单，这个二级页面就是采用的宫格式导航，作为发布微博的入口。

这种导航模式非常常见，但是却不常用。

无论你用的是Android还是iOS，每天一打开手机，宫格式导航就会对你说hello了。

每一个APP都是一个宫格，这些宫格聚集在中心页面，用户只能在中心页面进入其中一个宫格，如果想要进入另一个宫格，必须要先回到中心页面，再进入另一个宫格。每个宫格相互独立，它们的信息间也没有任何交集，无法跳转互通。因为这种特质，宫格式导航被广泛应用于各平台系统的中心页面。

宫格式导航的缺陷 ：

信息互斥，无法相互通达，只能给用户带来了更多的操作步骤。无法让用户在第一时间看到内容，选择压力较大。

何种情况下适用于宫格式导航：

适合入口相互独立互斥，且不需要交叉使用的信息归类

注意：

一旦入口需要有所交集，必然导致更多的操作负累，这个时候只能根据产品特性做出权衡，如果不适合，建议果断拒绝这种方式。

列表式导航结构清晰，易于理解，冷静高效，能够帮助用户快速的定位去到对应的页面。作为辅助导航来展示二级甚至更深层级的内容

列表式导航分为3类： 标题式列表、内容式列表、嵌入式列表。

标题式列表 :一般只显示一行文字，有的显示一行文字加一张图片等等。

内容式列表： 主要以内容为主，所以在列表中就会体现出部分内容信息，点击进去就是详情。

嵌入式列表： 嵌入式其实就是由多个列表层级组合而成的导航。能很好的解决次要功能非常多的问题

所有关于列表导航的例子大部分都是依附于标签导航之上的。前面我就说过现在以列表形式作为主导航的产品是越来越少，因为确实它不是一个好的主要展示形式。 列表项目可以通过间距、标题等进行分组，形成扩展列表。 列表菜单导航可以将重要的UI部分以列表的形式进行呈现，让用户可以滚动查看自己要执行的操作或内容。

而在二次层级上，它们还会 将列表分模块进行展示 ，如微信中“我的”模块“新消息通知、隐私、通用”是一组，“帮助与反馈、关于微信”又是一组。虽然你能看到，但是不仔细观察就不会发现其中的要点。只要善用这个细节，可以更好的加以区分次要功能，并提升用户体验度。

悬浮icon导航，是将导航页面分层，无论你到达APP的哪个页面，悬浮icon永远悬浮在上面，你依靠悬浮层随时可以去想要去的地方。

悬浮式icon会遮挡某些页面的操作，在设计的时候应该考虑进去，比如无论在那个页面永远为悬浮icon留有位置。

标签式导航： 最常用、最不易出错，请第一时间考虑它

抽屉式导航： 如果你的信息层级繁多，可以考虑将辅助类内容放在抽屉中

跳板式／宫格式导航： 不建议在APP中作为主导航使用，如果非使用不可，请增加跳转的关联性

列表式导航： 作为辅助导航来展示二级甚至更深层级的内容，每个APP必不可少，但请注意数量与分类

悬浮式导航： 更适应大屏的导航模式，不妨试一试，但注意不要让它遮挡住某些页面的操作

还是那句话，优秀的app导航设计，能够合理地完美展示产品的功能，并快速引导用户使用，增强用户的识别度。合理的导航设计，会让用户轻松达到目的而又不会干扰和困扰用户的选择。

感谢大家的耐心阅读，还有一路陪伴的行业大牛为我指点迷津！如果内容观点有不对的地方，欢迎批评指正！

Ⅱ 涓轰粈涔堥夋嫨XXHDPI锅氲捐″憿锛

钬杩欐槸瀹夊崜UI镄勭浜岀瘒鏂囩珷锛岀涓绡囦富瑕佽蹭简鍜岃捐＄浉鍏崇殑瀹夊崜绯荤粺锘虹鐭ヨ瘑锛岃繖绡囨枃绔犱富璁茶捐¤繃绋嬬殑閲嶈佹ラわ纴璁捐″伐鍏锋帹钻愶纴浠ュ强鏂囨汤璧勬簮涓嬭浇銆钬

涓娄竴绡囨枃绔犳彁鍒帮纴澶у浘缂╁皬姣斿皬锲炬斁澶х殑鎹熻楀皬锛岄偅鎴戜滑搴旇ユ牴鎹链澶х郴缁熷睆骞曞瘑搴XXXHDPI锅氲捐＄垮悧锛熺瓟妗堟槸涓嶈岀殑锛屽洜涓鸿捐＄挎枃妗ｅお澶э纴 ps瀹规槗鍗★纴鍒囧浘缁椤紑鍙戜篃浼氩炲ぇ瀹夎呭寘锛屾墍浠ヤ笉鑳介夋渶澶у昂瀵搞

涓嫔浘鏄鎴戞牴鎹浠婂勾链鐑镓嬫満鍨嫔彿鏁寸悊镄勮〃镙笺

浠庡浘涓鍙浠ョ湅鍑猴纴链鐑链哄瀷灞忓箷灏哄稿湪5.0浠ヤ笂锛屽睆骞曞瘑搴﹀湪400ppi浠ヤ笂锛屽垎杈ㄧ巼涓昏佹槸1080px*1920px銆

鎴戣缮镓句简鍏朵粬鐩稿叧璧勬枡锛岀粨鏋沧樉绀哄垎杈ㄧ巼1080px*1920px镄勫竞鍦哄崰姣旇秺𨱒ヨ秺楂樸

镙规嵁涓婇溃涓ょ偣镄勫垎鏋愶纴寰楀嚭镄勭粨璁烘槸锛鎸夌収1080px*1920px灏哄歌捐锛屽畠镞㈤檺鍒朵简鏂囦欢澶у皬鍙堣兘婊¤冻澶у氭暟鐢ㄦ埛镄勬樉绀烘晥鏋溿

1080px*1920px鍒氩ソ鏄瀹夊崜绯荤粺灞忓箷瀵嗗害XXHDPI镄勫垎杈ㄧ巼锛岃繖涓よ呯殑瀵瑰簲鍏崇郴鏄璋锋瓕瑙勫畾镄勶纴涓嶅繀娣辩┒锛屾垜浠鍙闇鍦╬s閲屾柊寤虹敾甯1080px*1920px锛屽垎杈ㄧ巼72ppi銆

锛堜箣鍓岖殑鏂囩珷璇磋繃锛岀敾甯冭剧疆涓哄儚绱狅纴鍒呜鲸鐜囦笉閲嶈侊纴璁剧疆澶氩皯閮藉彲浠ワ级

XXHDPI瀵瑰簲3X锲撅纴涔熷氨鏄1dp=3px銆傚湪Material Design璁捐¤勮寖閲岋纴鎶奷p鍜宲x鎹㈢畻锛屽氨鑳藉缑鍒扮浉搴旀带浠剁殑灏哄稿暒銆

涓娄竴绡囨枃绔犺︾粏璁蹭简瀹夊崜绯荤粺阃傞厤铡熺悊锛岀亩鍗旷殑璇村氨鏄锛屾寜镦х郴缁熷睆骞曞瘑搴﹂傞厤锛屼絾鏄链夌郴缁熺缉鏀惧浘鐗囧拰鍒囧嶆暟锲剧墖涓ょ嶆柟寮忥纴鍏蜂綋鍐呭硅风湅涓婃湡鏂囩珷銆

镙囨敞镄勭簿鍑嗗害鐩存帴鍏充箮鍒拌捐＄跨殑杩桦师搴︼纴闾ｆ庢牱镙囨敞镓嶈兘鐪佹椂鍙堢渷锷涘憿锛

镙囨敞杞浠舵帹钻愶细PxCook镀忕礌澶у帹

浠ュ墠鎴戜篃鐢ㄨ繃钬镙囦綘濡广侀┈鍏嬫浖銆丄ssistor PS钬濓纴缁煎悎姣旇缉鎺ㄨ崘PxCook锛屽畠镄勫畨瑁呭寘寰埚皬锛屾敮鎸佸氩钩鍙帮纴镙囨敞锷熻兘闱炲父鏅鸿兘锛岃缮鑳借嚜锷ㄧ敓鎴愪唬镰併

PxCook链夎捐″拰寮鍙戜袱绉嶆ā寮忥纴璁捐℃ā寮忎富瑕佺敤浜庤捐″笀镙囨敞鏁板硷纴阃夋嫨瀹夊崜璁捐＄垮崟浣嶅氨鏄痉p鍜宻p銆傚紑鍙戞ā寮忎富瑕佺敤浜庨勮堟爣娉ㄤ俊鎭鍜屼唬镰侊纴链変简寮鍙戞ā寮忓畬鍏ㄤ笉闇瑕佽捐″笀镙囨敞濂藉悧锛屽紑鍙戦渶瑕佸摢閲屾寚鍝閲屻

瀹幂殑浼桦娍浣撶幇鍦锛

灏忔暟闂棰桡细镀忕礌涓嶈兘涓哄皬鏁帮纴钖岀炴笚绁炴牱dp涔熷敖閲忎笉瑕佽剧疆鎴愬皬鏁帮纴阆垮厤dp涓哄皬鏁扮殑鏂规硶鏄锛屽亣濡傛垜浠璁捐＄殑鏄3X锲撅纴闾ｄ箞鐢诲竷閲屾墍链夌殑鍏幂礌閮藉繀椤绘槸3镄勫嶆暟锛屽叾浠栬捐＄跨被浼硷纴镙囨敞镄勬暟鍊奸櫎浠3鍒氩ソ鏄鏁存暟锛屼篃灏辨槸dp镄勫笺

鐑鍖洪梾棰桡细镓嬫満灞忛兘链夋渶灏忚Е鎽歌寖锲达纴濡傛灉锲炬爣灏忎簬杩欎釜鍊硷纴镙囨敞镄勬椂鍊栾板缑缁椤皬锲炬爣锷犵儹鍖恒

鍒囧浘鍜屾爣娉ㄤ竴镙凤纴涔熸槸淇濊瘉璁捐＄胯缮铡熷害镄勯吨瑕佺幆鑺伞

鍒囧浘杞浠舵帹钻愶细Cutterman

Cutterman鏄痯s镄勬彃浠讹纴杞浠跺寘灏忥纴鎺ㄨ崘瀹夎呭畼鏂瑰畬鏁寸増PS cc 锛岀豢镩茬増Ps镞犳硶浣跨敤銆傚畠鑳藉垏iOS锛孉ndroid锛孭C涓変釜骞冲彴镄勫浘鐗囷纴鍒囧浘鍓嶈板缑璁剧疆褰揿墠锘哄嗳锛屽嵆璁捐＄跨殑灏哄搞

鍜屽叾瀹冨垏锲捐蒋浠剁浉姣旓纴瀹幂殑镎崭綔鏂逛究寰埚氾纴鐣岄溃锷熻兘绠鍗曚笖瀹规槗鐞呜В锛屼笉镀廇ssistor PS锛屾垜鐜板湪杩樻病鏄庣槠瀹冨垏瀹夊崜锲剧墖镄勫师鐞嗭纴鍒囧嚭𨱒ョ殑锲剧墖灏哄镐篃涓嶅癸纴瀹屽叏涓岖煡阆挞梾棰桦嚭鍦ㄥ摢閲屻

娉ㄦ剰锛

镣9锲

.9.png鏄疉ndroid寮鍙戜腑浣跨敤镄勫浘鐗囨牸寮忥纴浣灭敤鏄淇濊瘉锽婅锲剧墖鍦ㄦ媺浼稿悗鏄剧ず涓嶅け鐪燂纴涓昏佺敤浜庨伩鍏嶅浑瑙掋佹弿杈广佽儗鏅绾圭悊绛夋ā绯婂彉褰锛屽悓镞惰缮鍑忓皬浜嗗浘鐗囱祫婧愩

png锲剧墖

.9.png锲剧墖

涓昏佸簲鐢ㄥ満鏅锛瀵硅瘽妗嗭纴鑳屾櫙绾圭悊锛涚幇鍦ㄨ捐￠庢牸澶у氭槸镓佸钩椋庢牸锛屾寜阍锷犳笎鍙桦拰鎶曞奖镄勭浉瀵瑰皯瑙併

.9锲剧墖铡熺悊鏄锛阃氲繃涓婅竟鍜屽乏杈𨱒ユ带鍒舵媺浼稿尯锘燂纴阃氲繃鍙宠竟鍜屼笅杈𨱒ユ带鍒跺唴瀹圭殑鏄剧ず鍖哄烟銆

.9锲剧墖镄勫洓涓灞炴э细

娉ㄦ剰锛

镣逛节锲剧墖鍒朵綔宸ュ叿锛draw9patch

镞х増镄凛utterman镊甯︾偣涔濆垏锲惧姛鑳斤纴浣嗘槸鏂扮増娌℃湁浜嗭纴鍙鑳芥槸镣逛节锲句娇鐢ㄨ寖锲村お绐勬垨钥呭紑鍙戠紪璇戜细鍑洪梾棰桦惂锛屼负浜嗛伩鍏嶅嚭鐜伴梾棰樻帹钻愬畨鍗撶郴缁熻嚜甯︾殑宸ュ叿draw9patch鍒朵綔镣逛节锲

锘烘湰镎崭綔濡备笅锛

锲惧垏瀹屼简锛屾庝箞锻藉悕锻锛

锻藉悕镄勮勮寖涓嶆槸锲哄畾镄勶纴鍏抽敭鏄鐪嫔叕鍙稿紑鍙戠殑锻藉悕涔犳傥锛屽傛灉链変互鍓岖殑璁捐℃枃妗ｅ彲浠ュ弬镦с

涓鑸瑙勮寖鏄锛鍒嗙被钖岖О+鎺т欢钖岖О+锷熻兘+鐘舵.png锛涗笉鑳界敤涓鏂囧懡钖嶏纴涓嶈佷互鏁板瓧鎴栫﹀彿寮澶达纴鎺ㄨ崘浣跨敤鑻辨枃灏忓啓瀛楁瘝锻藉悕锛屼娇鐢ㄤ笅鍒掔嚎杩炴帴銆

涓句釜渚嫔瓙锛

涓涓鍒楄〃涓婄殑鎸夐挳锛岀偣鍑绘煡鐪嬫洿澶氾纴澶勪簬姝ｅ父鐘舵併

List_btn_more_nor.png

[email protected]

鍒囩墖鍒嗙被鏄鍒楄〃list涓婄殑鍏幂礌锛屾带浠舵槸鎸夐挳btn锛屽姛鑳芥槸镆ョ湅镟村歮ore锛岀姸镐佹槸姝ｅ父nor銆

链钖庯纴浜や粯缁椤紑鍙戠殑鏂囨。鍖呭惈锛

瀹岋紒

鍒拌繖閲屾枃绔犲氨缁撴潫鍟︼紒链鏂囩殑鍐呭归兘鏄璁捐¤繃绋嬬殑閲嶈佹ラわ纴涔熸槸鎴戝仛璁捐＄殑镐荤粨銆傛湁镄勫湴鏂硅茬殑涓嶈︾粏锛屽彲浠ョ浉鍏崇煡璇嗙偣锛屽洜涓哄疄鍦ㄤ笉𨱍宠插缑澶缁嗙庯纴鍏绘垚涓嶅仛浼告坠鍏氱殑濂戒範𨱍銆

涓嬫湡涓昏佽睲aterial Design璁捐¤勮寖銆

PxCook涓嬭浇阈炬帴锛http://www.fancynode.com.cn/pxcook

浜戠洏璧勬簮锛http://pan..com/s/1eRSOnXg 瀵嗙爜锛50j5

鍖呭惈锛氭柊鐗圕utterman锛岀偣涔濆垏锲撅纸draw9patch銆丣ava锛

涓嶆槗~

鐣锣勮捐″尃锛埚叕浼楀彿锛

浣滆咃细鐣锣

Ⅲ 请问：什么叫原型设计工具

原型设计工具，说白了就是能够帮助设计师制作静态或动态网页/App设计模型的工具。

在界面设计初级或中期，为了能够方便和其他设计师讨论、测试产品相关的设计想法，需要利用各种原型工具将产品模型做出来，一个个界面修改和迭代，必要的时候，还可以制作成动态的模型，直接测试，看看可能会有哪些问题或不足等。

而且，现在市场上其实有很多好用的原型工具。就像我们团队用的就是一款叫摹客Mockplus的原型工具。制作原型的时候，不仅提供大量优质模板，还可以直接拖拽各类组件或图标，按需从头快速绘制原型。 交互和动画也可以拖拽添加。 总的来说，使用起来相当简单。