菏泽知彼网络科技有限公司

CN
EN

產(chǎn)業(yè)資訊

APP界面設(shè)計之頁面布局的22條基本原則

2017-08-13

移動APP頁面布局(Layout)是我們設(shè)計app界面的時候,最主要的設(shè)計任務(wù)。

一個app的好與不好,很大部分取決于移動APP頁面布局的合理性。下圖為APP最原始的布局模型。

App界面設(shè)計 界面設(shè)計 APP界面

移動APP經(jīng)典布局界面欣賞,以首頁為例展示:

App界面設(shè)計 界面設(shè)計 APP界面

頁面布局顧名思義就是對頁面的文字、圖形或表格進(jìn)行排布、設(shè)計。

優(yōu)秀的布局,需要對頁面信息進(jìn)行完整的考慮。即要考慮用戶需求、用戶行為,也要考慮信息發(fā)布者的目的、目標(biāo)。

App界面設(shè)計 界面設(shè)計 APP界面

手機APP設(shè)計干貨:常見的APP信息布局方式

3種iPad端常見的界面設(shè)計布局模式和交互解析

對用戶行為的迎合和引導(dǎo),有一些既有原則和方法,比如下面的22條基本原則:

1、公司/組織的圖標(biāo)(Logo)在所有頁面都處于同一位置。

2、用戶所需的所有數(shù)據(jù)內(nèi)容均按先后次序合理顯示。

3、所有的重要選項都要在主頁顯示。

4、重要條目要始終顯示。

5、重要條目要顯示在頁面的頂端中間位置。

6、必要的信息要一直顯示。

7、消息、提示、通知等信息均出現(xiàn)在屏幕上目光容易找到的地方。

8、確保主頁看起來像主頁(使主頁有別于其它二三級頁面)。

9、主頁的長度不宜過長。

10、APP的導(dǎo)航盡量采用底部導(dǎo)航的方式。菜單數(shù)目4-5個最佳。

小白自學(xué)APP界面設(shè)計:APP導(dǎo)航交互設(shè)計全解

11、每個APP頁面長度要適當(dāng)。

12、在長網(wǎng)頁上使用可點擊的“內(nèi)容列表”。

13、專門的導(dǎo)航頁面要短小(避免滾屏,以便用戶一眼能瀏覽到所有的導(dǎo)航信息,有全局觀)。

14、優(yōu)先使用分頁(而非滾屏)。

15、滾屏不宜太多(最長4個整屏)。

16、需要仔細(xì)閱讀理解文字時,應(yīng)使用滾屏(而非分頁)。

17、為框架提供標(biāo)題。

18、注意主頁中面板塊的寬度。

19、將一級導(dǎo)航放置在左側(cè)面板。

20、避免水平滾屏。

21、文本區(qū)域的周圍是否有足夠的間隔。

22、各條目是否合理分類于各邏輯區(qū),并運用標(biāo)題將各區(qū)域進(jìn)行清晰劃分。

這些APP界面布局原則可以保證頁面在布局方面最基本的可用性。是非常適合app設(shè)計新手來掌握。

App界面設(shè)計 界面設(shè)計 APP界面

 

【APP布局案例的欣賞與解讀】

以上22條頁面布局的原則是與用戶的眼動軌跡研究有關(guān)系的。可以說是依據(jù)來源。

眼動研究是隨著用戶體驗的興起與技術(shù)設(shè)備的進(jìn)步,而興起的一種用戶研究方法。它是眼動技術(shù)與研究方法的二合一,通過眼動研究觀察被試者對移動應(yīng)用頁面的注視軌跡,輔助完成用戶體驗設(shè)計。

通過眼動研究,不但可以完整地還原被試者在各個頁面的注視軌跡,還可以通過劃分興趣區(qū)分析被試者在各區(qū)域內(nèi)容的關(guān)注度。

眼動研究提供的信息不只是人們是怎樣“看”東西的這么簡單,眼動反映了人腦的信息處理過程,眼動模式的特點與腦的信息處理都有密切的關(guān)系。


上一篇:朋友圈賣貨月入千萬,你信?

下一篇:沒有了!

主站蜘蛛池模板: 东莞精密模具加工,精密连接器模具零件,自動機零件,冶工具加工-益久精密 | 双杰天平-国产双杰电子天平-美国双杰-常熟双杰仪器 | 中山市派格家具有限公司【官网】 | 利浦顿蒸汽发生器厂家-电蒸汽发生器/燃气蒸汽发生器_湖北利浦顿热能科技有限公司官网 | 电动不锈钢套筒阀-球面偏置气动钟阀-三通换向阀止回阀-永嘉鸿宇阀门有限公司 | 金属回收_废铜废铁回收_边角料回收_废不锈钢回收_废旧电缆线回收-广东益夫金属回收公司 | 珠海网站建设_响应网站建设_珠海建站公司_珠海网站设计与制作_珠海网讯互联 | 贴片电容-贴片电阻-二三极管-国巨|三星|风华贴片电容代理商-深圳伟哲电子 | 鲁尔圆锥接头多功能测试仪-留置针测试仪-上海威夏环保科技有限公司 | 泰来华顿液氮罐,美国MVE液氮罐,自增压液氮罐,定制液氮生物容器,进口杜瓦瓶-上海京灿精密机械有限公司 | 炉门刀边腹板,焦化设备配件,焦化焦炉设备_沧州瑞创机械制造有限公司 | 警用|治安|保安|不锈钢岗亭-售货亭价格-垃圾分类亭-移动厕所厂家-苏州灿宇建材 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 | 滤芯,过滤器,滤油机,贺德克滤芯,精密滤芯_新乡市宇清流体净化技术有限公司 | 吉祥新世纪铝塑板_生产铝塑板厂家_铝塑板生产厂家_临沂市兴达铝塑装饰材料有限公司 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 奥运星-汽车性能网评-提供个性化汽车资讯 | 微妙网,专业的动画师、特效师、CG模型设计师网站! - wmiao.com 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 网优资讯-为循环资源、大宗商品、工业服务提供资讯与行情分析的数据服务平台 | 定量包装秤,吨袋包装称,伸缩溜管,全自动包装秤,码垛机器人,无锡市邦尧机械工程有限公司 | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 防火窗_耐火窗_防火门厂家_防火卷帘门-重庆三乐门业有限公司 | 医学模型生产厂家-显微手术模拟训练器-仿真手术模拟训练系统-北京医教科技 | 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 别墅图纸超市|别墅设计图纸|农村房屋设计图|农村自建房|别墅设计图纸及效果图大全 | 潍坊大集网-潍坊信息港-潍坊信息网 | 纯化水设备-EDI-制药-实验室-二级反渗透-高纯水|超纯水设备 | 代理记账_免费注册公司_营业执照代办_资质代办-【乐财汇】 | 在线钠离子分析仪-硅酸根离子浓度测定仪-油液水分测定仪价格-北京时代新维测控设备有限公司 | 环球电气之家-中国专业电气电子产品行业服务网站! | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛调查出轨取证公司_青岛婚外情取证-青岛探真调查事务所 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 合景一建-无尘车间设计施工_食品医药洁净车间工程装修总承包公司 | led太阳能路灯厂家价格_风光互补庭院灯_农村市政工程路灯-中山华可路灯品牌 | 辐射色度计-字符亮度测试-反射式膜厚仪-苏州瑞格谱光电科技有限公司 | 无线遥控更衣吊篮_IC卡更衣吊篮_电动更衣吊篮配件_煤矿更衣吊篮-力得电子 | 快速门厂家批发_PVC快速卷帘门_高速门_高速卷帘门-广州万盛门业 快干水泥|桥梁伸缩缝止水胶|伸缩缝装置生产厂家-广东广航交通科技有限公司 | 滑板场地施工_极限运动场地设计_滑板公园建造_盐城天人极限运动场地建设有限公司 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 |