基礎知識,分享常用的對齊技巧

2024-01-19 17:21:10 來源/作者: / 己有:0人學習過

對齊與間距,無非左右上下的關系,怎樣才能讓符合用戶的視覺感知呢?蕓蕓眾生,紅塵滾滾,有幸讓他(她)瞄上一眼,留下個“很舒服”的第一印象,非常重要,而且在實際設計的流程中,如果經常因為哪里沒對齊被批,會影響整個團隊效率,你在團隊中信任度也會降低。不要迷信什么大神了,還是把自己當前水平該掌握的基礎知識,拿到手,更靠譜。

基礎知識,分享常用的對齊技巧

說的玄乎點是設計師的態(tài)度,說大白話就是基礎不牢固,還總要建高樓。好,不念經了,說基礎,希望能發(fā)揮點作用。

一、基礎操作方式

工欲善其事,必先利其器。

利用參考線對齊。在Photoshop的【編輯】-【首選項】菜單中可以設置合適的網格尺寸。

基礎知識,分享常用的對齊技巧

在設計前期將界面進行設置框架參考線,通過參考線將按鈕、文字、圖形對齊。

基礎知識,分享常用的對齊技巧

PS參考線小插件-GuideGuide

這是一個非常便捷的畫參考線的工具,讓你節(jié)省了時間去算參考線。在插件你可以輸入一些數(shù)字,GuideGuide可以通過你設定的單位自動劃分號好網格。這個軟件最強大的地方就是:可以通過畫布中選區(qū)的大小生成對應的網格參考線。真是畫參考線的神器也!

基礎知識,分享常用的對齊技巧

界面中常用對齊形式

對齊三大招:齊行、居左、居中。(貌似初一就學過,干活卻老忘)

基礎知識,分享常用的對齊技巧

齊行式:運用在閱讀性文本中,比較長的文本段。一般用在詳情頁中。(圖:貓眼電議)

基礎知識,分享常用的對齊技巧

居左式:這種用的比較多,常常運用在APP的設計中,列表信息展示等。這種對齊方式比較容易閱讀,能很好的區(qū)分主次文本的層次。(圖:淘寶)

基礎知識,分享常用的對齊技巧

居中式:主要使用在信息流式的文本表現(xiàn)方式中。(圖QQ音樂)