火星網(wǎng)校
我的設(shè)計成長筆記—第18篇(UI設(shè)計6)
發(fā)布時間：2024-04-01 10:52:27 瀏覽量：230次
UI設(shè)計6
2019年6月3日
今天是我距離30歲的倒數(shù)第284天
這里是我的設(shè)計成長筆記
—————————————————
視覺實現(xiàn)
規(guī)范制定完成后下一步就是視覺稿的實現(xiàn)了，這個階段只需要把重點放在視覺表現(xiàn)力上就好，規(guī)范里基本的框架，配色，字體，字號，組件都已經(jīng)確定了，在這個階段需要做的是靈活的使用這些規(guī)范，確保設(shè)計的視覺一致性，配合運營思路、數(shù)據(jù)導(dǎo)向等進行視覺稿的優(yōu)化處理，比如icon樣式，頁面排版、banner設(shè)計等。（可能因為我對規(guī)范的制定能力還不足的原因，我在視覺實現(xiàn)的過程中會發(fā)現(xiàn)規(guī)范有些不足或者失誤的地方，這時候會進行一個反向的修改，重新優(yōu)化視覺設(shè)計規(guī)范。）
開發(fā)實現(xiàn)
這個階段經(jīng)常遇到的問題就是開發(fā)實現(xiàn)還原度不夠，或者實現(xiàn)不了。
通常發(fā)生這種情況是因為
1、設(shè)計規(guī)范不標(biāo)準(zhǔn)或者設(shè)計稿制作不嚴(yán)謹(jǐn)
2、開發(fā)人員能力不足、態(tài)度不端正
3、開發(fā)人員對細(xì)節(jié)產(chǎn)品認(rèn)知不嚴(yán)謹(jǐn)
4、開發(fā)人員工作量大，覺得設(shè)計稿部分內(nèi)容不必要
5、缺乏團隊溝通
6、缺乏走查流程
作為設(shè)計首先先自查，是否輸出文件都是標(biāo)準(zhǔn)的，是否認(rèn)真對待了每一個像素；其次考慮實現(xiàn)的必要性，是否必要，，是否可替代其他方案解決，是否可以推遲下一個版本；最后，如果確定是開發(fā)人員能力不足的情況，進行團隊溝通，商討出現(xiàn)階段的解決方法。
填一下前面的坑
切圖標(biāo)注
UI設(shè)計第1篇的時候介紹過尺寸單位，
第5篇的時候介紹了命名規(guī)范，點擊可以查看
UI設(shè)計1
UI設(shè)計5
切圖一般分為iOS和Android兩種（貿(mào)易戰(zhàn)后可能也會出一種叫Huawei os的吧）
切圖標(biāo)注現(xiàn)在基本已經(jīng)完全脫離手動操作了，藍(lán)湖、墨刀、sketch measure、ps Pxcook、cutterman、zeplin等。
只需要把命名好的文件，標(biāo)注好切圖的范圍后，上傳OK，然后把上面的鏈接拋給開發(fā)即可，內(nèi)置顏色，尺寸，字號，全部都有，切圖也可以一鍵下載（只要你在文件里都標(biāo)注過切圖范圍的）
需要注意的地方有
1、標(biāo)注尺寸不要有小數(shù)。
2、@3x是@2x尺寸的1.5倍，例如一個圖標(biāo)切圖@2x尺寸是44px，那么@3x尺寸是66px。
3、盡量降低圖片大小，保障后期加載速度。
4、44px是最小點擊區(qū)域，注意不要比這個小。
5、44px圖標(biāo)可以適用兩個平臺，大尺寸的適配66px即可
6、點九切圖需要特殊對待（后續(xù)可以加一篇）
開發(fā)階段除了前端的界面設(shè)計，還有后臺設(shè)計，一般后臺都是自己內(nèi)部使用的，所以不需要界面美化的過程，但是仍然需要一套標(biāo)準(zhǔn)的規(guī)范去約束，這時候就引入vue的概念了。
好，就到這里。
——————————————————
文中涉及相關(guān)鏈接
https://zhuanlan.zhihu.com/p/26529771
https://zhuanlan.zhihu.com/p/26593299
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 10個免費學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
5. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點擊欲望,從而提高點擊率。本文將為你...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 武漢UI設(shè)計培訓(xùn)班費用怎么樣？想學(xué)UI設(shè)計要多少錢？
想了解武漢UI設(shè)計培訓(xùn)班的費用是多少嗎？不知道學(xué)UI設(shè)計要花多少錢？不妨看看這篇文章，了解UI設(shè)計培訓(xùn)班的學(xué)費價格以及學(xué)習(xí)內(nèi)容。
-
10. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
最新文章
