2023-9-19 藍藍設(shè)計的小編
作者：藍藍設(shè)計
前一段時間，有一個客戶（主管研發(fā)負責人）向我提出了這個問題：如何提高公司程序員工程師的UI審美？
他們公司UI設(shè)計師只設(shè)計其中很小的一部分頁面，大部分頁面要讓程序員自己來做的，程序員開發(fā)出的頁面看起來總是很丑，這是他覺得苦惱的地方。
在聽到這個問題的時候，我很驚訝，覺得這個問題真的是個好問題。我以前關(guān)注的都是設(shè)計師如何提高自己的審美？沒有想過讓程序員提高自己的審美。
據(jù)我了解，他們公司的程序員非常忙，比我們UI設(shè)計公司的加班程度要多很多。我首先想到的是工作都這么辛苦了，能把功能任務(wù)完成就很不錯了，也許能顧上提升UI設(shè)計審美的時間精力有限。
提高審美，不是短期內(nèi)能夠達到的事情，何況術(shù)業(yè)有專攻，工程師們有沒有興趣和精力做這件事情，也是另外的一個問題。
但是，這是一個很好的問題，在一個軟件公司里工程師程序員是占大多數(shù)的，UI設(shè)計師相對人數(shù)比較少的。如果大量的工程師能夠把審美提高易用性提高。確實，這個軟件的整個UI水準就會提高。
如何提升整體軟件的UI設(shè)計美的水準，讓軟件好用又統(tǒng)一？
我首先想到的是制定好的UI規(guī)范，做好全流程的交互設(shè)計原型。
通過核心關(guān)鍵場景，關(guān)鍵頁面的梳理，整理出一套設(shè)計語言，規(guī)定好UI規(guī)范。這份工作可以由設(shè)計師來做，把所有的字號顏色使用的元素組件都確定好，關(guān)鍵的場景和頁面做一些模板，制定一份完善的UI規(guī)范，方便工程師按照這些去復(fù)用調(diào)用，降低難度。
下圖是藍藍設(shè)計給中國石油設(shè)計界面和圖標后，制定的UI規(guī)范。
其次是讓產(chǎn)品經(jīng)理或者是交互設(shè)計師把軟件的大部分頁面，畫出交互原型。交互原型線框圖畫的速度要比視覺設(shè)計要快很多，它能夠解決的是軟件的易用性和對業(yè)務(wù)的理解。很多時候的反復(fù)修改，都是對業(yè)務(wù)的理解和表達方式的不一致，在交互層面各方的人達成一致，確定好布局和表現(xiàn)內(nèi)容，就能夠減少程序員的很多工作量。少加無用的班，在做之前把問題定義清楚。
定義問題可能需要用戶研究員，甲方，乙方，使用方，去深入溝通討論，有很多情況下，我們并不知道自己不知道或者是不知道自己的方向是片面的，也許要引進一些比較前沿的研究方法。
有的時候工程師做的頁面丑或難用是因為不太了解業(yè)務(wù)和沒有考慮到用戶體驗。如何使用這個軟件？程序員的使用方法和普通人的使用方法是不一樣的。即使同為工程師，對某個事情的理解和表達也是不一樣的，所以需要統(tǒng)一交互表達方式，要出交互設(shè)計原型。
藍藍設(shè)計畫的全流程交互原型
藍藍設(shè)計優(yōu)化后的后臺界面
如果是程序員自己剛創(chuàng)業(yè)或是個人開發(fā)者，那么就必須自己提高UI審美了，從ant或vue上也有一些公司公開的ui規(guī)范可以借鑒，有一些設(shè)計模板可以購買。
提升審美的相關(guān)網(wǎng)站：
Dribbble /花瓣/站酷/ 大作/優(yōu)設(shè)網(wǎng)/Behance / Pinterest上相關(guān)的UI設(shè)計欣賞。也可以看一些小紅書、抖音上相關(guān)的設(shè)計前后的對比、教UI設(shè)計的視頻，一些設(shè)計書籍，那就像設(shè)計師一樣學起來吧。
總結(jié)一下我給的建議：
一、降低美學難度，給予ui規(guī)范，方便工程師用此標準復(fù)用。
二、分解工作量，降低工作量，給予交互原型，方便工程師用此標準復(fù)用。
三、多看一些好的軟件UI設(shè)計和產(chǎn)品設(shè)計文章以及作品，時間久了，潛移默化中就能夠提升自己的審美。
四、設(shè)計師和開發(fā)工程師進行交流和討論,互相給予反饋和建議,共同提高審美能力，軟件綜合水準。
資源：
1推薦的書籍：《寫給大家看的設(shè)計書》，經(jīng)典、簡單易看懂。
2建立自己的資源庫，好的設(shè)計收藏起來，這里是藍藍設(shè)計收藏的，如果想要請加微信ben_lanlan。
3 如有UI方面需要提升，需要幫助的請聯(lián)系微信ben_lanlan咨詢，或打電話01063334945，希望我們能夠幫助到您。
藍藍設(shè)計的小編 http://m.shtzxx.cn