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

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)系。


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

下一篇:沒有了!

主站蜘蛛池模板: 重庆波纹管|重庆钢带管|重庆塑钢管|重庆联进管道有限公司 | 首页 - 张店继勇软件开发工作室| 高效复合碳源-多核碳源生产厂家-污水处理反硝化菌种一长隆科技库巴鲁 | 礼仪庆典公司,礼仪策划公司,庆典公司,演出公司,演艺公司,年会酒会,生日寿宴,动工仪式,开工仪式,奠基典礼,商务会议,竣工落成,乔迁揭牌,签约启动-东莞市开门红文化传媒有限公司 | DNA亲子鉴定_DNA基因检测中心官方预约平台-严选好基因网 | 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 精密五金冲压件_深圳五金冲压厂_钣金加工厂_五金模具加工-诚瑞丰科技股份有限公司 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 洛阳永磁工业大吊扇研发生产-工厂通风降温解决方案提供商-中实洛阳环境科技有限公司 | 网站建设-高端品牌网站设计制作一站式定制_杭州APP/微信小程序开发运营-鼎易科技 | 真石漆,山东真石漆,真石漆厂家,真石漆价格-山东新佳涂料有限公司 | 步进_伺服_行星减速机,微型直流电机,大功率直流电机-淄博冠意传动机械 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 恒温水槽与水浴锅-上海熙浩实业有限公司 | 物联网卡_物联网卡购买平台_移动物联网卡办理_移动联通电信流量卡通信模组采购平台? | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 排烟防火阀-消防排烟风机-正压送风口-厂家-价格-哪家好-德州鑫港旺通风设备有限公司 | 蔬菜配送公司|蔬菜配送中心|食材配送|饭堂配送|食堂配送-首宏公司 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 高压无油空压机_无油水润滑空压机_水润滑无油螺杆空压机_无油空压机厂家-科普柯超滤(广东)节能科技有限公司 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 风淋室生产厂家报价_传递窗|送风口|臭氧机|FFU-山东盛之源净化设备 | 附着力促进剂-尼龙处理剂-PP处理剂-金属附着力处理剂-东莞市炅盛塑胶科技有限公司 | 团建-拓展-拓展培训-拓展训练-户外拓展训练基地[无锡劲途] | 泰国试管婴儿_泰国第三代试管婴儿费用|成功率|医院—新生代海外医疗 | 「钾冰晶石」氟铝酸钾_冰晶石_氟铝酸钠「价格用途」-亚铝氟化物厂家 | 澳洁干洗店加盟-洗衣店干洗连锁「澳洁干洗免费一对一贴心服务」 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 立式矫直机_卧式矫直机-无锡金矫机械制造有限公司 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 重庆监控_电子围栏设备安装公司_门禁停车场管理系统-劲浪科技公司 | 丽陂特官网_手机信号屏蔽器_Wifi信号干扰器厂家_学校考场工厂会议室屏蔽仪 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 天津试验仪器-电液伺服万能材料试验机,恒温恒湿标准养护箱,水泥恒应力压力试验机-天津鑫高伟业科技有限公司 | 代写标书-专业代做标书-商业计划书代写「深圳卓越创兴公司」 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 | EFM 022静电场测试仪-套帽式风量计-静电平板监测器-上海民仪电子有限公司 | 冷油器,取样冷却器,热力除氧器-连云港振辉机械设备有限公司 |