用实战优化案例教你举一反三的 UI 排版方法！.docx

《用实战优化案例教你举一反三的 UI 排版方法！.docx》由会员分享，可在线阅读，更多相关《用实战优化案例教你举一反三的 UI 排版方法！.docx（13页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、某天中午去食堂吃饭时看着菜单陷入了沉思 菜单基本信息如下：午饭2 号楼 1F 11:45-13:30提示：珍惜粮食，从每一餐做起2 号曲口 11:45-12:45新派酸菜鱼/窖菜童鱼爪/炮炒青菜（15易豆）3 号窗口 12:00烤鸭（15易豆）4号窗口白切鸡/西兰花肉片/香鬲青菜（15易豆）5/6号窗口香狼牛杂（中镰）/雪菜毛豆肉丝/麻婆豆腐（15易豆）7/8号窗口新派酸菜鱼/干锅花菜/清炒土豆丝（15易豆）11-12号半自选窗口大簟：强黄鸿中翅/新派酸菜鱼（2选1）小炒：干锅花菜/西红柿炒湾聋（2选1）蔬菜：清炒毛毛菜（15易豆）13-16号自选餐线窗口手抓羊肉（10易豆）/新派酸菜鱼（8易

2、豆）/雪菜章鱼爪（6易豆）/西红柿炒鸡: （4易豆）/清炒生菜（2易豆）/杂粮拼盘（2易豆）/八宝饭（1易豆）/苹果（2易豆）/酸奶（1易豆）17-20号自选餐线窗口烤鱼（8易豆）/紫苏带鱼（8易豆）/笋干鸿爪（6易豆）/西红柿炒鸿瘠（4易豆）/清炒生菜（2易豆）/杂粮拼盘（2易豆）/八宝饭（1易豆）/苹果（2易豆）/ 酸奶（1易豆） 沙拉国口 12:30成品沙拉：香的鸿肉沙拉（18易豆）,果切三拼：哈密瓜/奇异果/红心火龙果（15易豆）（每人限1份）汤品西红柿鸡蛋汤杂粮红很显然我不是来凡尔赛食堂伙食的，我只是突然觉得这个东西特别像之前 收到的很多交互/用研铁汁的作品集，甚至述职报告。其实关于

3、Ui排版的文章挺多的，但是好像都把Ui排版局限在了小小的格 式塔原那么里。其实ui排版是一个很强大的信息收集与处理分发的过程，它 的核心价值并不在于变好看这件事儿。至于它有多强大？核心精髓又如何get?我决定授之以鱼不如授之以渔， 就用食堂的菜单来做一个例子，提供一个大家可以举一反三的ui排版方 法。我们假设，如果要把菜单信息变成一些铁汁（尤其是纯交互/用研）的作 品集，可以如何优化排版呢？刍选窗口1720号窗口1316号窗口手抓羊肉10易豆烤鱼10易豆新派酸菜鱼8易豆紫苏带鱼8易豆雪菜章鱼爪6易豆笋干鸡爪6易豆西红柿炒鸡蛋4易豆清炒生菜/杂粮拼盘/苹果2易豆八宝饭/酸奶1易豆选窗口1316号

4、窗口手抓羊肉1。易豆新派酸菜鱼8舄豆雪菜章鱼爪6易豆1720号窗口烤鱼10易豆紫苏带鱼 8易豆笋干鸡爪6易豆西红柿炒鸡蛋48清炒生菜/杂粮拼盘/苹果29 八宝饭/酸奶 1舄量这里推荐大家尽可能的多用黑白字体，彩色字体仅作为需要分割的辅助信 息或者标签存在，不然会影响整体阅读的重心，感觉画面很花。2 .文字、图片与色彩的比对，才是一个合格的画面。尽量不要留满满一页文字，或者满满一页图片，合理搭配，按不同配比进 行碰撞才能有良好的视觉体验及阅读愉悦感。1316号窗口手抓羊肉工。易豆新派酸菜鱼8易豆雪菜章鱼爪6易豆1720号窗口烤鱼10易豆紫苏带鱼 8易豆箸干鸡爪 6易豆西红柿炒鸡蛋4易豆清炒生菜/

5、杂粮拼盘/苹果2易豆八宝饭/酸奶 1易豆自选窗口配菜:西红柿炒鸡球”豆清炒生菜/杂粮拼盘/苹果2舄豆八宝饭/酸奶 1豆1316号窗口烤鱼109豆紫苏带鱼8易豆笋干鸡爪6易豆手抓羊肉10JB5新派酸菜鱼8易豆雪菜章鱼爪6易豆1720号窗口Step 4.细节元素的视觉化我们尽可能多的将纯文本信息转化为细节的视觉元素，不仅可以点缀画 面，也可以让用户降低理解本钱，从而提升阅读的可读性。这里我们可以通过标签、图标、分割线等多种方式来进行元素的视觉化传达。1.图标化2 .标签化2号窗口11:45-12:4515易豆新派酸菜鱼雪菜章鱼爪炮炒青菜新派酸菜鱼2号窗口雪菜章鱼爪O 11:4512:45炮炒青菜G

6、et完以上的技巧，还有最后一件事情：如果是述职or面试作品集，排版 的意义更在于信息表达的清晰度而非视觉上的美观，无论你是5还是交 互！切记切记！希望大家不要把作品集做成菜单基本当你将以上以上的UI排版思维应用到日常时、尤其作品集时，很多 人就会开始分不清你是UI还是交互了，这个时候你就可以说自己万能 UXo最后，看完了这个“精彩”的故事，有人有兴趣拿“晚饭”来做个练习吗？还 是说有人默默翻开了蓝色软件点了一份图上的拉面？劄10号未央窗口阳春面+狮子头（大份15易豆、小伊10易豆）2号自选餐线窗口普椒鱼头（中豌）10、；脂鸡胭8、水蒸蛋4、茵菇炖豆腐4、清炒菠菜（2易豆）杂粮悟（1易豆）、水果

7、（2易豆）、酸奶（1易豆）自助面档牛肉拉面（8易豆）汤品椰汁水果西米露奈旅红蕾、小土豆晚饭2号楼 2F 18;00-19:301号窗口老坛酸菜炒饭+热狗+楂汁（大份14易豆，小份12易豆）3号窗口牛肉粉丝汤+小笼包（大份15易豆、小份13易豆）4号窗口香辣三鲜冒菜（15易豆）5号窗口鲜筑鱼鸡蛋拌饭/培根辛拉面（10元/份）6号窗口牛排套餐：菲力牛排28元/份、沙朗牛排28元/份7号窗口胡椒猪肚鸡（15易豆）推荐阅读（点击标题可跳转阅读）2021年，UI设计师最值得跟进的新趋势极光风移动端设计的小趋势讲真，我从这些Dribbble顶尖图标大神的作品中学到很多Step 1.动手之前，先拆解信息第一

8、步不要急着排版，我们需要思考的问题是我们的内容需要分拆成多少 块进行一页页的输出，也就是量化每一页的文案内容。过度拥挤的一页内 容，读者不易发现内容的亮点与优先级，从而产生阅读抵触。而如果每一 页的内容都过少又无法高效的表达思路与饱满度。那么我们该如何把握这 里的节奏呢？这里建议大家可以以这样的思路进行拆分，我们将上面的菜单作品集拆为 了 4页左右的ppt,如下列图：午饭2 号楼 1F 11:45-13:30提示：珍惜粮食，从每一餐做起西红柿鸡蛋汤红新派酸菜鱼2号窗口11:45-12:4511:45-12:45雪菜章鱼爪15易豆熄炒青菜15易豆配餐窗口3号窗口烤鸭 12:00开始供应4号窗口白

9、切鸡西兰花肉片香菇青菜5/6号窗口香辣牛杂（中辣） 雪菜毛豆肉丝 麻婆豆E7/8号窗口新派酸菜鱼干锅花菜清炒土豆丝1720号窗口1316号窗口手抓羊肉10易豆烤鱼10易豆新派酸菜鱼8易豆紫苏带鱼8易豆雪菜章鱼爪6易豆笋干鸡爪6易豆西红柿炒鸡蛋4易豆清炒生菜/杂粮拼盘/苹果2易豆八宝饭/酸奶1易豆全局上考虑模块目录：午饭+午饭的相关说明一一目的为让各位干饭人清楚干饭的整 体时间、地点亮点：2号窗口当做了推荐窗口（也就是亮点）给读者进行了阅读推荐一目的是让各位干饭人知道我们有特别好次的菜，快来干饭集合分类：分类剩下的窗口为配餐与自选2种窗口进行集合展示目的 是告诉各位干饭人，我们的饭菜种类超多，想

10、吃啥都有。细节信息考虑合并同类项：把同类信息合并，防止重复展示，提炼最有价值的信息展示限制层级：尽量限制一页内容层级在2级以内，控制信息长度于是乎，内容的信息梳理便有节奏的完成了，注意是有节奏的完成了。*这里可能有细心的铁汁发现我舍弃了菜单里的一些窗口，不是因为个人 不爱吃，而是打个比方：并不是所有信息都是有价值展示出来的，我们不 需要面面俱到，判断好信息的价值，做到断舍离。Step 2.文字与图片，讲究恰到好处在组织完每页的内容后，作为设计师肯定少不了得配个图什么的（插画、 界面、原型什么的），不然无图言屈。这个时候文字与图片之间的关系就变得十分重要。这里给大家介绍几个高级配图的方式以及技巧

11、吧：1.关于全图背景有的铁汁可能会觉得整张图放着挺好看的昂，也很简单，不用拼接什么 的。但其实整张图在排版里的应用是很讲究条件的，贸然随便配个图当全 图背景就会使的整体非常不高级且不专业。建议大家多使用纯色底的元素 拼接点缀背景，这样化繁为简容易出效果。那什么特殊情况下可以使用整图背景呢？一般是针对视觉的同学有非常亮眼的纯视觉效果展示的时候可以用全图背 景，其他时候都不推荐。2 .主图的破格与个数限制 很多铁汁喜欢把展示的图片规规矩矩的放满，但其实亮点要通过放大与破 格突出。不要企图用很多图堆在一起来说明这个工程的亮点，比方这道菜是你重点推荐的，那么只需要一个放大的这道菜就会很有说服力。当然前

12、 提是这个亮点足够亮。（米请不要问为什么酸菜鱼章鱼爪和青菜要配一个饺子图，人艰不拆）11:45-12:4511:45-12:4515易豆新派酸菜鱼雪菜章鱼爪2号窗口11:45-12:4515易豆新派酸菜鱼雪菜章鱼爪炮炒青菜炮炒青菜3 .多图排布技巧我们经常要遇到必须要多图展示的情况，比方全页面、原型流程的展示、 或者表格什么的。比起duang一下扔一组mockup上去，我们可以借用超 实用的蒙层来实现图片与文案间的过渡，防止生硬的尴尬过渡。配餐窗口】5易豆3号窗口烤鸭12:00刑的曲4号窗口白切鸡 西兰花肉片 香芮青菜5/6号盲口香辣牛杂（中辣）雪菜毛豆肉丝麻婆豆璃7/8号窗口新派酸菜鱼干锅花

13、菜清炒土豆丝15易豆3号窗口烤鸭12:00开始供及4号鼠口白切鸡 西兰花肉片 香菸皆菜5/6号窗口香辣牛杂（中辣）雪菜毛豆肉丝麻婆豆腐7/8号窗口新派酸菜鱼干锅花菜清炒土豆丝配餐窗口 15易豆3号窗口烤鸭12:00开朝政4号窗口白切鸡 西兰花肉片 香菸胃菜5/6号窗口番辣牛杂（中辣）雪菜毛豆肉丝麻婆豆腐7/8号窗口 新派酸菜鱼干锅花菜清炒土豆丝尤其黑色底板的蒙层应用效果更加的好。Step 3.没有比照，就没有层次变化关于Ui排版思维里的比照主要是为了凸显内容的层次，引导用户更容易的 获取主要信息。这里比照包括字体、字重、大小、颜色等多维度的比对。 我们通常通过以下几个方式来形成比对，提升信息的传达效率。1.不要企图用同字重字色完成不同层级的信息展示。