关于折叠屏的设计指南，请收下。

最近做了HUAWEIMatexs手机折叠屏的相关设计，借此机会「趁热打铁」与大家分享一手界面操作体验和适应技巧，希望对设计师和同学有所帮助和参考。这里我用的是华为折叠屏(HUAWEIMatexs上市时间2020年3月)的折叠屏是什么？「折叠屏」这个概念更详细，更宏观的概念应该被称为「柔性屏」，折叠式屏幕可实现360度弯曲，甚至扭曲。折叠屏幕需要折叠20万次才能保持不变，是柔性要求较高的柔性屏幕，屏幕结构也需要单独设计。说到折叠屏幕，许多人或多或少会想到许多可折叠设备。在折叠设备的开发过程中，无论是翻盖手机、游戏机还是最新的折叠屏幕手机，都有一些共同的特点。例如，以下可折叠设备是典型的代表。△1974年，施乐公司提出了柔性屏(打印机公司)的概念△2004年任天堂NDS发布的第三代便携式游戏机。主要特征包括双屏显示，其中下屏为触摸屏。△ MotoV3  2004年9月上市日期，主屏分辨率176×220像素△ 三星W2014   2013年11月发布，主屏3.7寸分辨率800*480，副屏3.7寸800*480哪些品牌在设计生产折叠屏手机现在的折叠屏，三星GalaxyFold更倾向于一个屏幕的整体显示效果、华为Matex、华为MatexS、中兴Axonm、小米和魅族也在布局折叠屏幕领域，苹果也在加紧布局，W205G、摩托罗拉Razr、联想PC原型机、柔宇折叠屏手机等。△ 2018年1月20日，中兴AxonM主屏5.2英寸，1920*1080像素；副屏5.2英寸，1920*1080像素。△ 2018年1月20日，中兴AxonM主屏5.2英寸，1920*1080像素；副屏5.2英寸，1920*1080像素。△ MotoRazr，打开后，形成6.2英寸21英寸:9比例OLED屏幕摩托罗拉或9月份推出第二代Motorazr。然而，最新爆料称，机器至少要等到2021年才能上市△ SamsungGalaxyFold分辨率(折叠屏)：2152x1536(QXGA )分辨率(外屏)：720x1680(HD )△ GalaxyZFlip尺寸(折叠屏幕)：6.7英寸(直角)/6.5英寸(圆角)分辨率:1080x2636(FHD )△ 三星W205G7.3寸(直角)/7.1寸(圆角)2152x156(QXGA )4.6寸(直角)/4.5寸(圆角)720x1680△ 据外媒报道，苹果也在研发折叠屏手机/iPad行业，折叠iPhone最早将于2021年推出。据相关供应商介绍，折叠iPhone不再有刘海设计和人脸识别，而是采用上下折叠设计，具有以往iPhone从未具备过的特点和功能，如双屏、侧指纹解锁等。△ 小米折叠屏手机△ 柔宇折叠屏手机屏幕尺寸7.8英寸，柔性AMOLED屏幕分辨率1920*1440(展开状态)△ 联想折叠屏电脑ThinkPadX1Fold(售价1.7万元)，就像一本书，显示屏是13.3英寸的4:3比例OLED屏幕，分辨率为2048×1536△ HUAWEI华为Matexs展开态8英寸2480*2200左右：7.1折叠正面屏幕6.6英寸2480*148，约19.5：折叠屏幕背面屏幕6.38英寸2048*892：1.满足多场景折叠屏的特点是可以放大显示屏面积，满足游戏和高清视频的需求；它可以很容易地折叠到口袋里。2.高效的学习和办公技能，快速的单屏学习内容，全屏沉浸式操作，无论是屏幕屏幕分割还是灵活的文件拖动都可以很容易地完成3。当你使用大屏幕手机时，你会感受到它的魅力，显示更多样化的信息，交互式视觉结构的多样性，以及在大屏幕上浏览视频时的感觉，单屏手机是无与伦比的4。多任务体验和更丰富的人机交互体验可以实现多窗口显示和操作如何设计折叠屏幕界面和折叠屏幕交互细节分析最近得到了华为折叠屏幕，所以今天使用华为折叠屏幕作为折叠平台分析「前后折叠屏」交互设计和细节。1.官方适配方案对折叠屏设计的影响来了(提取了一些，可以查看更全面的官方指导文件)：https://developer.huawei.com/consumer/cn/doc/90101#h1-2-ux-相关尺寸：自适应动态布局：响应动态布局：页面层次：2。不同行业适应界面效果购物——淘宝淘宝利用大屏幕的尺寸优势，更多的内容显示在左右两侧，而不是简单地拉伸单屏模式下的界面。例如，您正在点击「天猫新品」下一页显示在屏幕的右侧，当您继续点击内容时，产品的瀑布流信息出现在左侧，产品选择的细节出现在右侧。这样做的好处是，你可以浏览一个屏幕2的风格，提高浏览效率：视频-华为视频华为视频使用自己的适应规则，让屏幕扩展内容的布局大小，我们可以看到包括横幅位置和推荐适应部分显示更多的信息，在搜索部分可以看到，没有全屏拉伸搜索，如果搜索大灰条全屏拉伸，效果不如入口协调；Tabar入口底部平分间距。音频/音乐播放在音频播放入口。单屏时，由于空间有限，不可能在一个屏幕上显示所有信息。折叠屏扩展后，界面空间变大后，歌词信息可以直接显示，满足用户在听音乐或听书时阅读文本的需要；相应位置的icon自动适应缩放间距。适用于折叠屏幕时的印象笔记的方法和方法「相对大屏」手机的横屏效果是一致的。随着屏幕的增加和单行文本的延长，阅读的难度和效率都会增加。因此，在适应时，用户可以使用左右栏快速搜索和扫描笔记列表信息。点击选定的笔记后，右屏显示本页笔记的详细信息，大大提高了笔记的阅读和写作效率：股票金融-同花顺场景适应是一个非常重要的思维点，如同花顺主页单屏幕和展开屏幕视觉空间内容显示，当单屏显示红色区域五个重要模块入口以icon的形式，当图片足够大时，很好地将icon转换为趋势图，提高用户识别效率；当折叠屏幕显示区域足够大时，包括「股票开户」入口和Tab切换位置区域可以更多地显示在一个屏幕上，有效地利用了折叠屏幕的大屏幕优势。而在「行情」在Tab的内容呈现上，利用折叠屏幕的大屏幕优势，可以看出单屏幕显示内容部分是在大屏幕显示上显示的「股票排行」放在屏幕的右侧，可以实现一边看市场趋势，一边看股票详情排行榜，一边看一边分析，提高浏览效率。旅游-携程3。折叠屏幕交互细节分析弹出逻辑清晰在单屏幕显示为了方便大屏幕操作，许多交互将浮动交互放置在底部更方便的操作区域，当展开时，图片扩展屏幕增加尺寸，如果浮动自动缩放拉长，图片不友好美观，例如左侧有两个标题，右侧数字，视觉连贯性不强，所以浮动在图片中间，很好地解决了这个问题，因为大屏幕需要两只手一起操作：当您同时显示双屏幕时，屏幕中间会出现拖动屏幕，您可以通过拖动调整显示笔记，消除不必要的屏幕内容：侧栏快速入口隐藏在华为屏幕右侧，可以在您身临其境的体验中，「从右侧向左滑动」快捷入口，它可以以浮动窗口的形式出现在屏幕的顶部，也可以拖动快速入口的应用程序和现有屏幕形成双屏幕显示。例如，当你看你最喜欢的综艺节目时，你也想和你的朋友聊天，而不是退出整个屏幕。此时，它是一个非常酷的互动；第二，当你看视频和参观天猫时，折叠屏幕的优势就会显现出来，折叠屏不会因为屏幕小而被打断——当你需要使用折叠屏幕的背面屏幕时，需要单击工具「镜子」图片将反转到手机的背面，此时可以使用小屏幕进行操作。因为华为折叠屏幕的摄像头在手机背面，如果需要和朋友视频聊天，背面屏幕的使用还是很频繁的。高效的办公室和学习折叠屏幕可以使图片分布，当你工作和学习时，存储和记录已经成为一件非常有效的事情，你可以阅读文章，同时记录你的知识：折叠键盘折叠屏幕因为大小，输入文本已经成为一个新的互动困难。华为折叠屏键盘有一个特别好的交互点，就是可以切换键盘左右，方便不同习惯左右手手势的用户写作。当您编辑文章场景时，您希望调用本地相册中的图片。除了选择添加图片的原始入口功能外，您还可以选择在折叠屏幕上拖动图片。是的，你可以直接拖动你想要的图片。这不是很神奇吗：华为折叠屏幕的适应问题刚刚在2020年3月上市，所以还有很多产品没有适应。让我们来看看没有适应的产品，例如，一些产品的界面变形或有效的内容信息被切割，或者内容没有充分利用大屏幕的优势，弹出窗口充满屏幕和其他飞猪应用程序的开放屏幕被严重拉伸和变形，贝壳应用程序的弹出窗口在屏幕上的比例：饿了么应用程序图标太大，一个屏幕上携带的有效信息较少，图片被拉伸等问题：网易新闻的开放屏幕直接切割了一些适合这种折叠屏幕的内容，例如左上角「京东618周年庆」，底部的「京东搜索栏」信息:视频聊天体验华为折叠屏使用不流畅的一点是摄像头的位置。举个栗子，如果你想在手机展开或者手机折叠的时候「正面」视频聊天是不可能的。你必须使用手机小屏幕的一面「背面/反面」视频通话，因为只有背屏才有摄像头，如果你想操作其他应用程序，而视频聊天，不能实现，必须翻转手机：总结和思考折叠屏幕的出现，给设计师带来更多的设计要求和新的交互逻辑思考，无论市场推断，折叠屏幕是手机的未来趋势，但或多或少影响我们的界面设计。无论哪种折叠屏幕，都为用户添加了一个可折叠的屏幕，使1 1大于2，手机变平板。无论哪种折叠屏幕，都为用户添加了一个可折叠的屏幕，使1 1大于2，手机变平板电脑。UI和UX设计师需要考虑折叠屏幕不仅在单个屏幕页面上呈现内容，而且在不同页面上呈现内容，带来新的操作体验。折叠屏幕的特点是可以放大显示屏面积，满足游戏和高清视频的需求；它可以很容易地折叠到口袋里，更便携，这将是一个预期的应用市场。未来，折叠屏幕可能会成为一个越来越复杂的展示平台，给设计师带来越来越多的挑战。折叠屏幕的交互仍有许多地方可以探索和改进。我们期待着更多样化的折叠屏幕和折叠屏幕交互方式的出现。声明：文章中的图片仅供设计师学习。如有图片侵权或其他问题，请联系删除。非常感谢。