公司動態
UI設計,讓我們和細節較勁
開局一張圖讓我們來了解一下UI設計師
在APP開發過程中最常見的一個問題
?
“你只設計了一套基于iOS的設計稿
(375*667像素),
但是安卓開發之后與設計圖相去甚遠,
甚至iOS開發也有一定差異性,
這是為什么呢?”
在做適配頁面的時候,不同移動設備有不同的尺寸,安卓和iOS的手機尺寸簡直不要太多,設計師雙拳難敵四手,更何況這么多尺寸和各種不同環境。
我們可以先從色彩、文字、圖標和成品頁面進行一遍由點到面的復盤,找出影響設計落地的各方面因素,從源頭上解決我們在設計到開發落地過程中遇到的問題,最大程度上去避免它。
Part. 01
在色彩的運用中,漸變色需要注意。設計可能會采用兩用方式:
1、直接切圖,切圖的話沒啥問題,不會變化太多,注意適配問題即可; 2、開發直接讀取顏色值來開發,要注意漸變的角度以及有幾種顏色漸變。
Part. 02
文字包含字體大小和字體顏色灰度。在移動設備上,則有幾點需要注意:
1、安卓與iOS字體大小的單位不同,會影響顯示效果,需與開發協調好之間的換算關系。 2、字重不同。在設計軟件上與實際開發環境的不同,設計稿可以顯示常規的集中字重,Regular、Light、Medium、Bold等。不同字體在PhotoShop或Sketch工具中有不同的字重,設計的時候我們可以選擇細微差別的字體字重如Regular(常規)和Medium(中等)來做文字層級區分。 3、行高顯示不同,不同瀏覽器、不同字體,文字行高不同,例如宋體的文章行高>黑體的行高,因此行間距也會不同,段間距也會發生變化,也是導致設計稿落地差的一個原因。我們需要與開發核對字符、行高、行間距,確保在對應模塊差異性達到最小。
Part. 03
Icon的差異性體現在切圖適配、設備色差、Icon視覺平衡這幾點上,設計的時候注意同模塊的Icon線條粗細一致,色塊顏色飽和度一致。
Part. 04
在開發完成之后上線測試之前,我們還可以在核對一遍成品頁面與設計稿之間的區別,做一個頁面的UI Review,對照設計稿與成品頁面,檢查一遍落地效果。有差異的整理成文檔并交給開發修改,并在開發修改后再次核對,以確保提出的問題在合理范圍內都被調整或改正,最后完成落地驗收。
Part. 05
在UI設計師的開發流程中,UI設計就是在和細節計較,項目是需要大量溝通來回修改的,不是一錘子買賣。不斷重復從討論初稿到最終上線的過程,從而給用戶帶來更好的體驗。對待設計一定要抱有敬畏之心,更要對產品負責,對自己的設計負責,我們的目標就是完善設計,給用戶帶來視覺上和操作上的舒適體驗。