激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI設(shè)計(jì)，讓我們和細(xì)節(jié)較勁

發(fā)布時間：2023-12-22 09:49:46 瀏覽量：121次

在UI設(shè)計(jì)師的開發(fā)流程中，UI設(shè)計(jì)就是在和細(xì)節(jié)計(jì)較，不斷重復(fù)從討論初稿到最終上線的過程，給用戶帶來更好的體驗(yàn)。

如圖所示，UI設(shè)計(jì)師在APP開發(fā)過程中最常見的一個問題：

“你只設(shè)計(jì)了一套基于iOS的設(shè)計(jì)稿（375X667px），但是安卓開發(fā)之后于設(shè)計(jì)圖相去甚遠(yuǎn)，甚至iOS開發(fā)也有一定差異性，這是為什么呢？”

市面上現(xiàn)有iOS和安卓的手機(jī)的尺寸

在做適配頁面的時候，不同移動設(shè)備有不同的尺寸，安卓陣營和iOS陣營的手機(jī)尺寸千千萬，設(shè)計(jì)師雙全難敵四手，更何況這么多尺寸和各種不同環(huán)境。

我們可以先從設(shè)計(jì)規(guī)范的幾個元素：色彩、文字、icon、組件、模塊、頁面和落地頁面進(jìn)行一遍落地頁面的由點(diǎn)到面的復(fù)盤，找出影響設(shè)計(jì)落地的各方面因素，從源頭上解決我們在設(shè)計(jì)到開發(fā)落地過程中遇到的問題，最大程度上去避免它。

色彩

色彩上，包含主視覺色、輔助色、操作色、警告色，還有一些應(yīng)用常用的同色系漸變色。

單色色彩問題不大，在一些主色點(diǎn)綴等的地方注意即可。

漸變色則需要注意，設(shè)計(jì)可能會采用兩用方式：

  • 直接切圖，切圖的話沒啥問題，不會變化太多，注意適配問題即可。
  • 讓開發(fā)直接讀取數(shù)據(jù)來開發(fā)，主要是開發(fā)直接用數(shù)據(jù)做漸變會有一點(diǎn)問題，設(shè)計(jì)會采用從左到右，或者從左上到右下等等，總之就是漸變的角度會有不同的變化；而開發(fā)卻在固定的開發(fā)程序里輸入漸變數(shù)據(jù)，且為了應(yīng)用的穩(wěn)定性，一般就是兩組色值；如果有三組或以上則一般采取切圖的方式，這里就會造成一定的差異性。

而且不同移動設(shè)備色彩顯示差異，各個設(shè)備屏幕色域色準(zhǔn)不同，也是影響落地效果的一個因素。

文字

文字上，規(guī)范里常規(guī)的規(guī)定是包含字體大小和對應(yīng)層級文字的顏色灰度。

而在落地移動設(shè)備時，則有幾點(diǎn)需要注意：

  • 安卓與iOS字體大小的單位有所不同，會影響顯示效果，需與開發(fā)協(xié)調(diào)對應(yīng)字符的層級比例關(guān)系。
  • 字體不同，安卓是黑體、iOS系統(tǒng)是蘋方，字體會影響文字顯示觀感，影響落地效果。
  • 字體默認(rèn)顯示的排序有所不同，我的Mac上谷歌瀏覽器的默認(rèn)中文字體排序是蘋方，朗廷黑，微軟雅黑；而火狐瀏覽器的默認(rèn)中文字體排序則是蘋方，冬青黑體，微軟雅黑，文泉驛微米黑；使用者電腦里下載的字體也會影響瀏覽器默認(rèn)字體排序。此外，還有Windows電腦及不同瀏覽器，手機(jī)的各種瀏覽器，有不同的默認(rèn)默認(rèn)字體排序。
  • 字體字重，在設(shè)計(jì)軟件上與實(shí)際開發(fā)環(huán)境的不同，設(shè)計(jì)稿可以顯示常規(guī)的集中字重，Regular、UItralight、Thin、Light、Medium、Semibold、Bold、Heavy、Black等。如下圖所示，不同字體在PS或sketch中有不同的字重，設(shè)計(jì)的時候我們可以選擇細(xì)微差別的字體字重如Regular（常規(guī)）和Medium（中等）來做文字層級區(qū)分，

但是開發(fā)在編程的時候，字重顯示是用數(shù)字0-900來表示，且大致分為1-400（對應(yīng)normal）、500- 700（對應(yīng)bold）、800-900（對應(yīng)bolder）這三個層級，在同層級里調(diào)整字重?cái)?shù)值變化不大，只有跨層級才有明顯變化。

  • 字體行高顯示，不同瀏覽器、不同字體，文字行高不同，例如宋體的文章行高>黑體的行高，因此行間距也會不同，段間距也會發(fā)生變化，也是導(dǎo)致設(shè)計(jì)稿落地差的一個原因。我們需要與開發(fā)核對字符、行高、行間距，確保在對應(yīng)模塊差異性達(dá)到最小。
  • 若是涉及H5，則還有一層瀏覽器的適配因素需要考慮。

icon

icon的差異性體現(xiàn)在切圖適配、還有設(shè)備色差、icon視覺平衡這幾點(diǎn)上，設(shè)計(jì)的時候注意同模塊的icon線條粗細(xì)一致，色塊顏色飽和度一致，

組件、模塊、頁面

組件、模塊和頁面都由上述色彩、文字、icon等組成，影響是面性的，一個元素出現(xiàn)問題，會影響整個模塊甚至是頁面。

我們從細(xì)節(jié)處調(diào)整，由點(diǎn)及面，這樣可以避免大部分頁面落地差異性問題。

UI Review

只要思想不滑坡，辦法總比困難多。在規(guī)避了上述列舉的種種問題，我們可以避免90%左右落地稿與設(shè)計(jì)稿差異性的問題。

最后，還有一個方式來做彌補(bǔ)，那就是在開發(fā)完成之后上線測試之前，我們還可以在核對一遍落地稿與設(shè)計(jì)稿之間的區(qū)別做一個頁面的UI Review，對照設(shè)計(jì)稿與落地頁面，檢查一遍落地效果。有差異的標(biāo)明并記錄下來，將最終的表格上交開發(fā)修改，并在開發(fā)修改后再次核對，以確保提出的問題在合理范圍內(nèi)都被調(diào)整或改正。完成落地驗(yàn)收，復(fù)查也可以再一次檢驗(yàn)交互以及交互改進(jìn)。

記得剛?cè)胄袝r，我的老大跟我說過一句話，讓我至今印象深刻：“UI設(shè)計(jì)就是在和細(xì)節(jié)計(jì)較，不然我們是在和別人比誰畫的圓形更好看，誰畫的方形更突出么？”。

設(shè)計(jì)一定要抱有敬畏之心，對產(chǎn)品負(fù)責(zé)，對自己的設(shè)計(jì)負(fù)責(zé)。我們的目標(biāo)就是完善設(shè)計(jì)，給用戶帶來視覺上的舒適體驗(yàn)。

我們不斷重復(fù)“討論-初稿-設(shè)計(jì)-開發(fā)-落地頁UI Review-修改-定稿-上線”的流程，從熟悉流程，到展現(xiàn)自己的創(chuàng)意，再到解決各種開發(fā)中實(shí)際遇到的問題，在工作中不斷學(xué)習(xí)和沉淀，成為更好的自己。

作者：就不，公眾號：豬三的日常

本文由 @就不 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash， 基于CC0協(xié)議

熱門課程推薦

熱門資訊

請綁定手機(jī)號

獲取驗(yàn)證碼
x

同學(xué)您好！

您已成功報(bào)名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定