1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

如何设计折叠屏?来看这份设计指南!--九分网络

时间:2020-07-07   分类:交互设计    作者:网络   来源:网络整理   点击:104

最近做了HUAWEI Mate Xs手机折叠屏的相关设计,借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家,希望对各位设计师同学有所帮助和参考。在这里我使用的是华为折叠屏(HUAWEI Mate Xs 上市时间2020年3月)

www.9fen.net

折叠屏是什么?

「折叠屏」这个概念比较细,更加宏观的概念应该叫「柔性屏」,折叠屏可以实现360度的弯曲,甚至扭曲。折叠屏的屏幕需要经过20万次的折叠保持不坏,是柔性要求较高的柔性屏,屏幕的结构也需要单独设计。

copyright 9fen.net

可折叠设备的发展史

说到折叠屏,很多人都或多或少的会联想到很多可以折叠的设备,在折叠设备发展进程中,不论是翻盖手机、游戏机还是最新的折叠屏手机,都有着一些共同的特点,比如下面几个可折叠设备就是典型代表。 copyright 9fen.net

如何设计折叠屏?来看这份设计指南! 内容采集来自9fen.net

内容采集来自9fen.net

△ 1974年施乐公司就提出了柔性屏的概念(打印机公司)

www.9fen.net

如何设计折叠屏?来看这份设计指南!

本文来自九分网络

本文来自九分网络

△ 任天堂NDS

九分网络

2004年发售的第三代便携式游戏机。主要的特征包括了双屏幕显示,其中下方的屏幕为触摸屏。

本文来自九分网络

如何设计折叠屏?来看这份设计指南! copyright 9fen.net

copyright 9fen.net

△ Moto V3   上市日期 2004年09月,主屏分辨率176×220像素 www.9fen.net

如何设计折叠屏?来看这份设计指南!

copyright 9fen.net

九分网络

△ 三星W2014      2013年11月发布,主屏3.7寸 分辨率800*480 ,副屏3.7寸800*480

copyright 9fen.net

哪些品牌在设计生产折叠屏手机

现在的折叠屏,更趋向于一块屏幕整体展示效果,三星Galaxy Fold、华为Mate X、华为Mate XS、中兴Axon M、小米和魅族也在布局折叠屏领域,爆料苹果也在加紧布局中、 W20 5G、摩托罗拉 Razr ,以及联想的PC原型机、柔宇折叠屏手机等。 九分网络

如何设计折叠屏?来看这份设计指南! 九分网络

内容采集来自9fen.net

△ 中兴Axon M www.9fen.net

2018年1月20日,主屏幕5.2英寸,1920*1080像素;副屏5.2英寸,1920*1080像素。

www.9fen.net

如何设计折叠屏?来看这份设计指南!

九分网络

copyright 9fen.net

△ Moto Razr,打开后形成一块6.2英寸21:9比例的OLED屏幕 内容采集来自9fen.net

摩托罗拉或于 9 月份推出第二代Moto Razr 。然而最新爆料称,该机或至少要等到 2021 年才会上市 copyright 9fen.net

如何设计折叠屏?来看这份设计指南!

www.9fen.net

copyright 9fen.net

△ Samsung Galaxy Fold

www.9fen.net

分辨率(折叠屏):2152 x 1536 (QXGA+)
分辨率(外屏):720 x 1680 (HD+) 九分网络

如何设计折叠屏?来看这份设计指南! www.9fen.net

www.9fen.net

△ Galaxy Z Flip

九分网络

尺寸(折叠屏):6.7英寸(直角)/6.5英寸(圆角)
分辨率:1080 x 2636 (FHD+)

内容采集来自9fen.net

如何设计折叠屏?来看这份设计指南! copyright 9fen.net

九分网络

△ 三星W20 5G 内容采集来自9fen.net

7.3英寸(直角)/7.1英寸(圆角)2152 x 1536 (QXGA+)
4.6英寸(直角)/4.5英寸(圆角)720 x 1680

copyright 9fen.net

如何设计折叠屏?来看这份设计指南!

copyright 9fen.net

内容采集来自9fen.net

△ 据外媒爆料苹果也在研发折叠屏的手机/iPad

内容采集来自9fen.net

业界传出,苹果最快将于2021年推出折叠iPhone。据相关供应商透露,折叠iPhone不再有刘海设计及人脸识别,将搭载双屏幕、侧面指纹解锁等过往iPhone不曾有过的特色与功能,采用上下折叠设计。

copyright 9fen.net

如何设计折叠屏?来看这份设计指南! www.9fen.net

www.9fen.net

△ 小米折叠屏手机

copyright 9fen.net

如何设计折叠屏?来看这份设计指南!

copyright 9fen.net

本文来自九分网络

△ 柔宇折叠屏手机 本文来自九分网络

屏幕尺寸达7.8英寸,同时采用柔性的AMOLED屏幕,分辨率达1920*1440(展开状态)

本文来自九分网络

如何设计折叠屏?来看这份设计指南!

九分网络

www.9fen.net

△ 联想折叠屏电脑

copyright 9fen.net

ThinkPad X1 Fold(售价1.7万元),合起来就像一本书一样,其显示屏是一块13.3英寸的4:3比例OLED屏幕,分辨率为2048×1536 本文来自九分网络

如何设计折叠屏?来看这份设计指南!

www.9fen.net

www.9fen.net

△ HUAWEI华为Mate Xs

copyright 9fen.net

展开态8英寸 2480*2200,约8:7.1
折叠态正面屏6.6英寸 2480*1148,约19.5:9
折叠屏背面屏 6.38英寸 2048*892约25:9 www.9fen.net

折叠屏的优势和特点

1. 满足多场景 内容采集来自9fen.net

折叠屏特点是可以放大显示的屏幕面积,满足游戏和高清视频的需求;又能轻松的折叠装入口袋中更加便携

www.9fen.net

2. 高效学习和办公

内容采集来自9fen.net

技能高效,单屏幕快速学习内容,又能全屏幕沉浸式操作,不论是屏幕分屏还是灵活的文件拖拽都能轻松搞定

九分网络

3. 视觉提升

本文来自九分网络

当你使用大屏手机时,你会感觉到它的魅力,展现信息更多样化、交互视觉的结构多样性,以及大屏浏览视频时的感受,单屏幕手机是无法比拟的

www.9fen.net

4.多任务体验和更丰富的人机交互体验

九分网络

可以在展开屏幕时实现多窗口的同时显示和操作等 内容采集来自9fen.net

如何设计折叠屏界面以及折叠屏交互细节分析

最近拿到了华为折叠屏,所以今天利用华为折叠屏作为折叠平台分析「前后折叠屏」的交互设计和细节。 www.9fen.net

1. 折叠屏对设计的影响

官方适配方案来啦(摘取了部分,更全面的可以去查看官方指导文件): 内容采集来自9fen.net

屏幕展开与收起的相关尺寸: 本文来自九分网络

如何设计折叠屏?来看这份设计指南! 本文来自九分网络

本文来自九分网络

自适应动态布局: 九分网络

如何设计折叠屏?来看这份设计指南!

copyright 9fen.net

九分网络

响应式动态布局:

内容采集来自9fen.net

如何设计折叠屏?来看这份设计指南! www.9fen.net

内容采集来自9fen.net

页面层次:

内容采集来自9fen.net

标签: 优设 ui设计 优设网 折叠屏 折叠屏设计

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----