隨便舉一個(gè)栗子


隨便選一個(gè)畫面咱們來(lái)挑挑骨頭，然后再來(lái)修改，最近做的一個(gè)項(xiàng)目，攻城獅給我之前，菜單畫面是這樣的

我不知道LOW是啥，但是我知道花里胡哨的玩意太多，我屏幕反應(yīng)很慢就行

1、背景色是最大的敗筆，RGB有255*255*255種顏色，偏偏選擇這個(gè)顏色，差評(píng)！
2、按鈕，就這樣一個(gè)灰不拉幾的按鈕，恕我直言，我并沒(méi)有想按下去的想法，這個(gè)機(jī)器是給藥廠使用，你認(rèn)為藥廠的小姑娘們會(huì)喜歡這個(gè)風(fēng)格？
3、配色，這個(gè)問(wèn)題其實(shí)一般人都不敢輕易去談，因?yàn)檎f(shuō)實(shí)話一般工程師們對(duì)色彩搭配確實(shí)不太會(huì)。
4、沒(méi)有小圖標(biāo)，整個(gè)畫面都是靠矩形圓形正方形三角形撐起來(lái)，一點(diǎn)都不活潑可愛(ài)，簡(jiǎn)單明了！

我們來(lái)?yè)Q一個(gè)風(fēng)格





好了，來(lái)和我一起修改下，先看我修改之后的圖，然后再給大家介紹下怎么實(shí)現(xiàn)，以及分享給大家一些超級(jí)實(shí)用、豐富、高效的網(wǎng)址和工具。

1、背景色的修改

（舉個(gè)例子為了說(shuō)明背景可以多樣化一下，而不是單純的灰色單色）一般來(lái)說(shuō)，去匹配每個(gè)公司自己的風(fēng)格，很奇怪的一個(gè)問(wèn)題，企業(yè)很注重自己的廣告和設(shè)備的宣傳圖，但是很少有企業(yè)會(huì)將自己的機(jī)器設(shè)備的人機(jī)界面和企業(yè)整體風(fēng)格整合，比如企業(yè)的logo偏藍(lán)色，那為什么你的畫面要做成灰不拉幾的，而且每個(gè)機(jī)型的界面都是不一樣的！這里根據(jù)公司的logo，選用漸變色的背景，顯得科技感十足！

做好一張漸變色背景圖，將透明度調(diào)到40%，存儲(chǔ)為png格式，png這個(gè)格式圖片用的非常多，以后會(huì)詳細(xì)介紹！然后再添加到組態(tài)軟件，作為背景圖。

2、按鈕的修改

我們可以參考iphone的app圖標(biāo)，將按鈕做成圓形的、帶小圖標(biāo)的或帶文字的按鈕。那么問(wèn)題來(lái)了，上面這些好看的圖標(biāo)都是在哪找的呢？怎么給我的項(xiàng)目找到最全的圖標(biāo)，電機(jī)、傳感器、風(fēng)機(jī)和閥門等等，你想到的我都能讓你找到！推薦一個(gè)超級(jí)實(shí)用的找圖標(biāo)的網(wǎng)址：www.iconfont.cn ，登錄之后的界面是這樣的：
注意：看中哪個(gè)直接點(diǎn)擊下載，下載之前選擇顏色和格式，一般下載png格式就可以了，因?yàn)檫@種格式的圖標(biāo)背景色是透明的，這就意味著添加到你的組態(tài)軟件中，不會(huì)有難看的白色背景，方便你的設(shè)計(jì)。

3、接下來(lái)解決配色的問(wèn)題

你可以對(duì)色彩不敏感，你可以只用一種顏色，但是也好過(guò)一個(gè)畫面五顏六色的搭配，紅的黃的白的黑的，真的很扎眼！可是工科男的審美就這樣了，愛(ài)咋咋地！下面再推薦一個(gè)超級(jí)實(shí)用的調(diào)色工具，幫你快速高效的配色，傻瓜式操作，網(wǎng)址：www.materialpalette.com，登錄之后的界面是這樣的：

引用

引用第1樓夢(mèng)雨天涯于2024-08-15 14:19發(fā)表的  :
我不知道LOW是啥，但是我知道花里胡哨的玩意太多，我屏幕反應(yīng)很慢就行

我也更喜歡這個(gè)方方正正的畫觸摸屏

不錯(cuò)不錯(cuò)，，展示效果對(duì)老板來(lái)說(shuō)很重要！

想要做出精美的界面需要花費(fèi)更多的時(shí)間投入，時(shí)間充足還好，當(dāng)遇上趕工程時(shí)還要這么搞這不把人往死整。術(shù)有專攻，每個(gè)人審美不一樣，老板那么意這個(gè)可以單招個(gè)美工負(fù)責(zé)這一塊

怎么感覺(jué)是某音上的呢！其實(shí)圖標(biāo)我一直都在用阿里圖庫(kù)。但是配色的話之前沒(méi)怎么在意，這個(gè)是要花時(shí)間的。現(xiàn)在非標(biāo)自動(dòng)化設(shè)備這么圈哪有時(shí)間搞這種呀

工控論壇發(fā)的和這個(gè)一模一樣。是不是閣下原創(chuàng)的文章？