正文

ui設(shè)計項目中遇到的問題（ui設(shè)計項目中遇到的問題及對策）

發(fā)布時間：2023-04-28 03:28:27 稿源：創(chuàng)意嶺閱讀： 456

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計項目中遇到的問題的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

1、UI設(shè)計中如果圖標(biāo)大小不一致一般怎么處理?
2、UI設(shè)計如何提高團(tuán)隊協(xié)作
3、如何在項目開展之后,UI設(shè)計能夠盡量少的改動？
4、UI設(shè)計師該如何進(jìn)行一個項目?

ui設(shè)計項目中遇到的問題（ui設(shè)計項目中遇到的問題及對策）

一、UI設(shè)計中如果圖標(biāo)大小不一致一般怎么處理?

首先，這種方法制作出來的圖標(biāo)大小為48px*48px，需要其他尺寸的圖標(biāo)可以做完之后等比放縮即可，放縮過程中可能需要注意半像素（見下文）的問題。

Material Design把圖標(biāo)的形狀類型分為三種：圓形、方形和矩形。其中圓形的半徑為44px，方形的邊長為38px，矩形為44px*32px。

怎么判定圖標(biāo)應(yīng)該套用那種尺寸的？有一種方法是：將圖標(biāo)與上圖的模板居中對齊，然后中心不動，放大圖標(biāo)使之圖標(biāo)依次碰到三種形狀的邊界，填充最滿的那個形狀的尺寸就是該圖標(biāo)需要規(guī)定的尺寸。如下圖，依次將設(shè)置圖標(biāo)放大并使之接觸到不同形狀的邊界，可以看到在圓形里，該圖標(biāo)最大，證明設(shè)置圖標(biāo)最匹配圓形，所以使用圓形的尺寸44px*44px。

下面正式定義尺寸部分：

1. 如果形狀為方形，則圖標(biāo)大小為38px*38px，若只是近似的方形，則取較小的邊為38px，等比放縮。

2. 如果形狀為圓形，則取圖標(biāo)大小為44px*44px，若只是近似的圓形，取較大的邊為44px，等比放縮。

3. 如果形狀為矩形，先令短邊為32px，等比放縮圖標(biāo)，若此時長邊大于或者約等于44px，則取長邊為44px，等比放縮；否則，令長邊為y，取長邊為（44+y）/2，再向上取整，然后進(jìn)行等比放縮。

根據(jù)以上的規(guī)則制定出來的圖標(biāo)，大小就會比較統(tǒng)一。如下圖，左邊是調(diào)整前，右邊是調(diào)整后。（不過也有人反饋說看不太出來o(╯□╰)o）

順便把這次整理圖標(biāo)遇到的坑也記錄一下：

1. 關(guān)于半像素的問題。

半像素的問題主要是在進(jìn)行Android不同尺寸適配的時候，有時候開發(fā)會要求圖標(biāo)不能出現(xiàn)非整數(shù)的尺寸，不然可能圖標(biāo)就會糊掉。所以在設(shè)計Android端使用的圖標(biāo)時，注意一下這個問題。適當(dāng)?shù)貙Τ叽邕M(jìn)行四舍五入一下即可。

2. 關(guān)于iconfont的問題。

現(xiàn)在大部分團(tuán)隊都會將圖標(biāo)轉(zhuǎn)換為iconfont，這樣可以縮小整個項目的大小。圖標(biāo)在轉(zhuǎn)換為iconfont的時候，會忽略所有的線條（包括填充色塊的邊）。所以，如果圖標(biāo)中有線條，則需要利用高度為1px的矩形代替，色塊的邊長需要用色塊疊加來替代。

3. 關(guān)于對齊的問題。

如果有仔細(xì)看，我這個方法指定的圖標(biāo)大小為48px*48px，但是里面有內(nèi)容的部分，比如說圓形，就只會占據(jù)44px*44px，這時候我們當(dāng)然會希望把圖形放置在圖標(biāo)的中央。免不了就會使用對齊工具，咻咻兩下，一個上下居中對齊，一個左右居中對齊，搞掂。但是，慢著，如果仔細(xì)發(fā)現(xiàn)一下，你會發(fā)現(xiàn)看上去并不是居中的。這是由于人的視覺錯覺造成的，這時候就需要進(jìn)行適當(dāng)?shù)恼{(diào)整，通過自己的視覺判斷來進(jìn)行對齊。

4. 關(guān)于顏色統(tǒng)一的問題。

一般而言，圖標(biāo)設(shè)定為同一個色值（比如#999999）就能統(tǒng)一顏色，但是也有遇到過某個圖標(biāo)會顯得顏色比較淺，具體原因未知，這時候就需要進(jìn)行特殊的處理，比如設(shè)定更加深的顏色，比如#333333，具體通過自己視覺調(diào)整即可。

二、UI設(shè)計如何提高團(tuán)隊協(xié)作

一、視覺UI設(shè)計與交互設(shè)計之間應(yīng)銜接無縫，即時刷新視覺頁面

一般產(chǎn)品設(shè)計流程包括不同的階段，不同的階段其涉及的范疇內(nèi)容不一樣，作為設(shè)計師面對所有步驟不能一蹴而就，而是按部就班，計劃行事。

當(dāng)然作為視覺設(shè)計師;設(shè)計過程中主動出ABC…方案而不是只拿出一個唯一的方案，只有將想法用畫面來表達(dá)，才是夠合格的設(shè)計師，特別是視覺設(shè)計師，好處可以鍛煉自己的設(shè)計表達(dá)力，方便評審定稿，避免反復(fù)修改被人牽著走。

二、適當(dāng)時，為開發(fā)開啟更多的話語權(quán)，避免更多的無用功

視覺規(guī)范、視覺標(biāo)注、視覺控件庫的整理與輸出目的只有一個：那就是指導(dǎo)開發(fā)，讓設(shè)計100%還原落地;回到項目中，對于設(shè)計團(tuán)隊與開發(fā)團(tuán)隊通常會體現(xiàn)以下兩種情況出現(xiàn)：

開發(fā)團(tuán)隊對項目有豐富經(jīng)驗，設(shè)計團(tuán)隊對此項目經(jīng)驗少-開發(fā)話語權(quán)大于視覺設(shè)計團(tuán)隊擁有多次項目經(jīng)驗，并有一定的設(shè)計沉淀累積-設(shè)計話語權(quán)大于開發(fā)從視覺設(shè)計而言，如果是設(shè)計團(tuán)隊擁有豐富的經(jīng)驗這是最好的，用經(jīng)驗累積設(shè)計沉淀與創(chuàng)造性指導(dǎo)項目，話語權(quán)大，反之亦然。

三、用80%場景的視覺設(shè)計+視覺控件規(guī)范+切圖+標(biāo)注+宣講來指導(dǎo)開發(fā);

1.視覺設(shè)計的場景

由交互提供具體場景的典型頁面，視覺稿進(jìn)行輸出，多次迭代評審敲定后，再由開發(fā)提出缺失場景的視覺設(shè)計，視覺進(jìn)行場景補充;

2.視覺UI控件規(guī)范的輸出

必須是經(jīng)過多次評審與迭代的最終視覺稿;但通常情況下，為了趕進(jìn)度視覺設(shè)計與規(guī)范是同步進(jìn)行，這導(dǎo)致規(guī)范反復(fù)修改的問題。

3.切圖與整理

切出所有視覺頁面中涉及到的圖標(biāo)與輔助圖形;圖標(biāo)大小如：24px/ 32px/48px/72px/128px等，根據(jù)圖標(biāo)具體場景中的大小、顏色、狀態(tài)來切。換句話說，每一個圖標(biāo)都有它對應(yīng)的具體場景，特定的尺寸、顏色和狀態(tài);記得曾與開發(fā)gg對規(guī)范與切圖的時候，他說：頁面的圖標(biāo)切圖，需要的是一個具體的拿來就用的，我們不會去畫一個圖標(biāo)或去特定寫一個圖標(biāo)的顏色。

4.標(biāo)注

視覺頁面的標(biāo)注基于UI控件規(guī)范的基礎(chǔ)上進(jìn)行，拋棄以往每個頁面細(xì)無巨細(xì)的具體尺寸/色值/大小的標(biāo)注。其實每一個視覺頁面皆由不同的UI控件組成，在頁面中將對應(yīng)控件用UI控件規(guī)范中的編號來標(biāo)注，開發(fā)gg拿著視覺頁面標(biāo)注去敲寫代碼時，再在UI控件規(guī)范文檔中尋找相對應(yīng)的控件規(guī)范細(xì)節(jié);這樣，視覺設(shè)計師避免在視覺頁面中做那密密麻麻的尺寸標(biāo)注，而開發(fā)gg拿到標(biāo)注清爽的視覺頁面也不會產(chǎn)生視覺疲勞。

5.規(guī)范宣講

以上4步完成后項目開發(fā)啟動前，用視覺規(guī)范對開發(fā)做統(tǒng)一的宣講，避免遺漏造成規(guī)則傳達(dá)不一致;這樣，還設(shè)計原度還是問題么?

四、與開發(fā)近距離接觸，面對面解決問題

最后一個方法是與開發(fā)來個親密接觸，即如果有條件允許的話，請與開發(fā)坐一起;遇到問題及時面對面澄清、拉通指導(dǎo)、達(dá)成共識、修改、敲定、解決。

試想一下，如果不和開發(fā)坐在一起，即使開發(fā)面對再完善的設(shè)計規(guī)范，基于開發(fā)本身對設(shè)計美感的欠缺，開發(fā)過程多多少少都會產(chǎn)生理解偏差。開發(fā)過程每遇到一個細(xì)節(jié)問題，開發(fā)gg都得拉著視覺問：這個按鈕上的左右箭頭是無限循環(huán)嗎?圖標(biāo)缺少了一個狀態(tài)，那個狀態(tài)是什么等;發(fā)個信息問拉會或者電話討論，有時候還解釋不清楚，效率低且事倍功半。

2.視覺UI設(shè)計師直接進(jìn)組到開發(fā)團(tuán)隊中

結(jié)合當(dāng)前項目的做法是視覺設(shè)計師直接進(jìn)駐到開發(fā)團(tuán)隊中，與開發(fā)團(tuán)隊坐在一起，舉個例子此項目視覺在深圳，開發(fā)在異省南京或是異國，視覺也出差飛過去長期進(jìn)駐，遇到問題面對面商議解決;大大提高了開發(fā)的進(jìn)度與也節(jié)約了時間，視覺還原度還是問題么?當(dāng)然，如果設(shè)計與開發(fā)本來就附近辦公，則不需無休止的出差，項目成本節(jié)省不少。

三、如何在項目開展之后,UI設(shè)計能夠盡量少的改動？

項目總結(jié)的方式方法

- 項目總結(jié)的基礎(chǔ)架構(gòu)

- 項目總結(jié)的注意事項

從業(yè)最初兩年都是靠看學(xué)習(xí)前輩的總結(jié)和自己的實踐來不斷成長的。有了一些經(jīng)驗的積累后也開始嘗試著做一些總結(jié)。從事設(shè)計管理工作之后除了一些技能的分享還會有設(shè)計思路和項目總結(jié)。其實會發(fā)現(xiàn)做總結(jié)的人要把自己的觀點融匯貫通并且以更易于理解的方式分享出來，講的人的收獲會比聽的人的收獲更大！所以堅持到現(xiàn)在，總結(jié)做的雖然沒有出神入化也是小有心得了。

做項目總結(jié)一定要有一個清晰的架構(gòu)，架構(gòu)是可以讓你繼續(xù)深入的一個基礎(chǔ)，如果你的總結(jié)是一個隨意的開始那一定不會有一個好的結(jié)果。磨刀不誤砍柴工，想清楚再做。項目總結(jié)的架構(gòu)基本上是包含以下幾部分內(nèi)容：

一、項目回顧

按照項目流程來介紹自己在該項目的各個環(huán)節(jié)所做的工作以及在這個過程中的時間損耗，讓所有聽的人能夠?qū)δ阕龅氖虑橛幸粋€基本的了解，當(dāng)然如果聽你總結(jié)的人是和你一起來完成項目的人并且對于你所做的工作非常熟悉那這一步是可以省掉的。同時要通過對比以往項目來明確你在此項目中的輸出效率。

二、問題剖析

剖析自己在這個過程中產(chǎn)生的問題及相關(guān)的解決方案。你所遇到的問題對于遇到同樣問題的人來說大家會想知道你的解決方式?jīng)]有遇到問題的人來說需要讓他們在之后的項目里來避免同樣的問題發(fā)生。問題剖析環(huán)節(jié)最難的是好多人會羞于講出自己所犯的錯誤，怕大家會以此來看低你，一旦有這種心理總結(jié)就會不夠客觀就會避重就輕。但是基本上所有公司都會愿意看到員工發(fā)現(xiàn)自己的問題并能及時改進(jìn)而不愿意看到的是一個連自己都無法認(rèn)清的人。

三、經(jīng)驗總結(jié)

項目總結(jié)不只是要認(rèn)清自己的問題也是要清楚自己做的好的地方。好的經(jīng)驗是我們持續(xù)成長的資本，也能讓我們不斷提高自己的標(biāo)準(zhǔn)以更高的要求來要求自己。

不同類別的項目總結(jié)的內(nèi)容框架會有些差異，比如售前需求的項目會有和需求預(yù)期的對比，售后需求需要有一些用戶在使用之后的反饋。但是這幾項是必須要有的。同時在做總結(jié)的過程中也需要注意：1. 要有目錄，要讓大家明白你接下來要講的內(nèi)容都有哪些；2. 時長合理，不建議過長一般半個小時到40分鐘比較合理，時間過長聽的人是沒辦法集中到你要分享的內(nèi)容上的，也起不到分享的效果；3. 用字精煉，簡單直接易于理解，不要用過于生僻的名詞也不要用過多的形容詞來修飾。

當(dāng)然了，項目總結(jié)也是需要持續(xù)實踐才能看到變化的，希望能夠在大家的工作中有所幫助。

四、UI設(shè)計師該如何進(jìn)行一個項目?

1、你的設(shè)計做給誰看

你需要思考，哪些人會觀賞你的設(shè)計。如果你已經(jīng)找到目標(biāo)群體，就應(yīng)該在設(shè)計中迎合他們的口味。

比如下面與兒童相關(guān)的設(shè)計，主題和色彩就要做到能夠引起兒童及家長的興趣。

購物相關(guān)的網(wǎng)頁或者 App 就要把商品展示做到最好，讓用戶產(chǎn)生購買欲。

如果你被委托設(shè)計婚禮邀請函，此時你的目標(biāo)受眾就不再是觀眾或者潛在用戶，而是甲方本人，畢竟他給錢他說了算。這時候你就得詢問本人的需求很多人剛開始很容易先入為主“甲方品味不行”“甲方要求的風(fēng)格太 low”可是，你是為甲方做設(shè)計還是為你自己做設(shè)計呢。

2、怎么讓你的設(shè)計驚爆眼球

目標(biāo)群眾確認(rèn)后，或許你就已經(jīng)想好了設(shè)計的整體風(fēng)格。接下來需要做的就是怎么讓你的設(shè)計引人注目。只有贏得觀眾的關(guān)注，人們才會感知到你的設(shè)計。那么又該怎么做才能引人注目。

①短時間激發(fā)觀眾興趣

想要讓你的設(shè)計引人注目，你應(yīng)該在盡可能短的時間內(nèi)激發(fā)他們的興趣。這時候奪人眼球的信息或者吸睛元素會對你有所幫助。

比如：打折力度、商品價格、富有沖擊力的插畫等。

②內(nèi)容把控要過關(guān)

在選用圖片時一定要注意，其內(nèi)容必須要和設(shè)計主題思想緊密相關(guān)。

怎么讓用戶一下子記住你的信息內(nèi)容。在設(shè)計之前，請務(wù)必明確：這個設(shè)計想傳達(dá)什么信息如果甲方爸爸說說高端大氣這種模棱兩可的答案。你不妨思考一下產(chǎn)品的用途和目的。名片上最重要的是姓名、職務(wù)、聯(lián)系方式。　然而對于演唱會海報而言，藝人及其演出地點和日期則是最重要的信息。在促銷廣告中，人們應(yīng)該一眼就能看到降價幅度以及活動地點和日期。并且要做好信息層級劃分與分類。

學(xué)設(shè)計不應(yīng)該局限與理論與案例，跟著理論案例去實踐才有用。

以上就是關(guān)于ui設(shè)計項目中遇到的問題相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。