惊喜!发现新大陆!

用户头像
上海/UI设计师/1年前/57浏览
惊喜!发现新大陆!
用户头像
RRRyana
“ 操纵性菜单设计往往还要借助排版的力量。”
设计价目表的时候,苦于数字价格和类目文字需要单独创建文本框,亦或者要按住键盘上的空白键很多次,即使是这样还要面对无法对齐工整的情况。
但是发现【制表符】这个小功能后,完全能解决这个痛点了!
接下来,就由我来总结一下,分享给大家吧!
Step1.  找到这个【制表符】功能
可以使用快捷键:shift+command+T
或者点击窗口-文字-制表符
惊喜!发现新大陆!(图ZMTQ4OTIyNzY=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
Collect
Step2.  调整工具窗口与文本对齐
点击右侧的“磁铁”🧲的图标,这样这个工具栏就会自动与文本框左对齐。这样做的好处就是后面设置横向X距离比较精准啦!
惊喜!发现新大陆!(图ZMTQ4OTIyODA=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
真挺有意思的,觉得挡字的话 还能上下移动一下位置~
Collect
Step3.  调整数值,确定间隔距离
有两种方式:
1. 可以选择直接输入精准的数字
2.肉眼确定大概位置,用鼠标点击标尺即可。如果标尺定位的话,会出现小数点后的数字,不介意的话也没关系滴~
惊喜!发现新大陆!(图ZMTQ4OTIyODQ=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
我试了两种方式,个人更喜欢标尺上定位 更方便快捷,一下子到位
Collect
Step4.  添加前导符,可以起引导视线的作用
因为在我这个设计场景中,需要引导顾客消费,所以需要在价格前面增加省略号,来引导用户的视线。
惊喜!发现新大陆!(图ZMTQ4OTIyNTY=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
我在“前导符”框里输入一个“.”符号
Collect
📢
题外话
关于考虑要不要添加符号引导视线的底层逻辑
这部分,我之前看《无价》这本书中第12章-菜单标价心理战,对菜单设计中价格前有无引导线对顾客消费时心理影响是很大的。大家感兴趣的话,可以看看,角度蛮新颖的,收获会不小!
惊喜!发现新大陆!(图ZMTQ4OTIyNjA=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
没想到价格数字前面的符号设计还有这种讲究
Collect
Step5.  选择对齐方式
提供了四种方式,分别是左对齐、居中对齐、右对齐以及小数点对齐制表符。
具体是指所有价格数字的对齐方向。
惊喜!发现新大陆!(图ZMTQ4OTIyNjQ=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
对齐真真是排版中的基础,哪哪都需要它
Collect
Step6.  一键自动化操作
文本光标工具放置在需要调整的地方前,按下电脑上的「Tab」键,即出现下图效果:
距离菜品名称尾端的水平间距相同。
惊喜!发现新大陆!(图ZMTQ4OTIyNjg=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
Collect
到这为止,就完成了一键自动调整菜品名字与价格之间的间距,且可以自由添加符号。相比于手动复制一份文本再删除文字内容,保留数字,再进行对齐这样复杂的排版方法来说,简直省了一半的时间诶!尤其是遇上如果要增加省略号等符号的情况!
Step7.  其他情况
1. 是否可后期再调整间距数值?
2. 删除或更改其他符号?
惊喜!发现新大陆!(图ZMTQ4OTIyNzI=) - 教程 - 站酷设计师RRRyana原创素材 - 站酷ZCOOL
如上图,我在前导符框里删除“.”符号后 它自动在文本框里删除了
Collect
如果后续又不想要省略号这些符号©️或者想要更换成其他的,选中文本框,把鼠标光标放在数字前,删除【前导符】框里的内容,其实它会自动删除了!
再调整间距的话也是同理操作。
这么一个小小功能,其实要搞清楚每个小按钮的功能蛮有意思的!而且极大地提高了设计排版的效率!
大家快去试试👀,会爱不释手的!
好啦。本期分享到此为止了,我们下期再见👋
Wish you have a nice day!😘
-END-
作者|Ryana
30+个公众号长图PSD模版在售卖中
店铺在
小红书,
🔍
RRRyana 设计师
· 会有意外惊喜哟 ·
5
Report
|
收藏
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
Log in