當(dāng)前位置：首頁(yè) >UI設(shè)計(jì) >我的設(shè)計(jì)成長(zhǎng)筆記—第11篇(UI設(shè)計(jì)1)

我的設(shè)計(jì)成長(zhǎng)筆記—第11篇(UI設(shè)計(jì)1)

發(fā)布時(shí)間：2023-12-26 20:56:42 瀏覽量：176次

UI設(shè)計(jì)1

2019年5月11日

今天是我距離30歲的倒數(shù)第305天

這里是我的設(shè)計(jì)成長(zhǎng)筆記

—————————————————

經(jīng)歷過(guò)之前的成長(zhǎng)后，開(kāi)始正式接觸UI設(shè)計(jì)，

主要還是因?yàn)槭袌?chǎng)缺口的原因，

移動(dòng)互聯(lián)網(wǎng)的普及，讓UI設(shè)計(jì)如火如荼，再加上大眾創(chuàng)業(yè)萬(wàn)眾創(chuàng)新的政策，好像全民都在做app了。

在加上資本的錢(qián)都開(kāi)始流向這邊，果斷投身到了行業(yè)大軍中去。

最開(kāi)始的時(shí)候也是迷茫的，

雖然有了一些電商設(shè)計(jì)的基礎(chǔ)，知道一些尺寸，適配的問(wèn)題，但是對(duì)這個(gè)行業(yè)的認(rèn)知還是空白的。沒(méi)有框架，沒(méi)有基礎(chǔ)，對(duì)于想步入這個(gè)行業(yè)來(lái)講還是有些困難的，好在設(shè)計(jì)思維邏輯的基礎(chǔ)讓我沒(méi)有最開(kāi)始學(xué)設(shè)計(jì)的時(shí)候那么慌張。

首先是了解這個(gè)行業(yè)

前期買了好多書(shū)籍資料，但是感覺(jué)沒(méi)什么用，原因是UI設(shè)計(jì)屬于這些年才發(fā)展起來(lái)的，大家都是在摸索過(guò)程，走在前面的人總結(jié)的經(jīng)驗(yàn)寫(xiě)成了書(shū)，但是隨著技術(shù)的更新，很多經(jīng)驗(yàn)已經(jīng)不適應(yīng)當(dāng)下的情況了，所以學(xué)UI不建議買太多書(shū)，包括學(xué)軟件的書(shū)我也不建議買，反正我買了挺多也就最開(kāi)始入門(mén)的時(shí)候感覺(jué)能學(xué)點(diǎn)，后來(lái)就越來(lái)越覺(jué)得這些東西網(wǎng)上都能查的到，當(dāng)然如果你搜索引擎用的實(shí)在不好，那就買吧，花錢(qián)節(jié)約時(shí)間。

UI設(shè)計(jì)（或稱界面設(shè)計(jì)）是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分為實(shí)體UI和虛擬UI，互聯(lián)網(wǎng)說(shuō)的UI設(shè)計(jì)是虛擬UI，UI即User Interface(用戶界面)的簡(jiǎn)稱。

UI設(shè)計(jì)的職能包含三塊：圖形設(shè)計(jì)、交互設(shè)計(jì)、用戶研究

圖形設(shè)計(jì)負(fù)責(zé)落地的界面設(shè)計(jì)，交互設(shè)計(jì)負(fù)責(zé)操作流程、軟件結(jié)構(gòu)、操作規(guī)范等，用戶研究負(fù)責(zé)調(diào)研測(cè)評(píng)提供佐證。

這樣其實(shí)還是很難理解，先了解一下即可。

我的學(xué)習(xí)方法是帶著問(wèn)題去學(xué)，所以我了解了大致后，就以我想做一個(gè)app的問(wèn)題出發(fā)了。

在這個(gè)問(wèn)題引導(dǎo)下，我開(kāi)始搜集這個(gè)行業(yè)的工作流程是什么，如果需要做一個(gè)app需要準(zhǔn)備哪些材料，需要使用哪些軟件等等。

大問(wèn)題拆分成小問(wèn)題，逐個(gè)擊破

先是工作流程，開(kāi)發(fā)一個(gè)app需要的工作是首先你得有個(gè)idea，知道自己要做什么類型的app，這個(gè)app可以解決什么問(wèn)題，（這個(gè)階段其實(shí)就是用戶研究的階段了）我仍然沿用之前做設(shè)計(jì)的思維邏輯，選定好自己要做的類型后，搜集競(jìng)品，看、想、記錄。

做了一些記錄，畫(huà)了一些草圖（后來(lái)發(fā)現(xiàn)這些草圖就是產(chǎn)品經(jīng)理所說(shuō)的線框圖）

把這些草圖一張一張的聯(lián)系起來(lái)就成了術(shù)語(yǔ)里的交互流程圖

最終做出來(lái)的簡(jiǎn)單版方案就成了原型（那時(shí)候感覺(jué)做個(gè)app也挺容易的，但是越往后越覺(jué)得自己想多了）

有了原型之后，就開(kāi)始查怎么落地，發(fā)現(xiàn)各種手機(jī)型號(hào)、尺寸、分辨率一下就懵逼了，以前用的都是pt、px現(xiàn)在又多出來(lái)個(gè)dp。

算了，一個(gè)一個(gè)解決吧。先把這些不懂的名詞理解了在往下進(jìn)行。

先是單位

px： pixel，像素，電子屏幕上組成一幅圖畫(huà)或照片的最基本單元

pt: point，點(diǎn)，印刷行業(yè)常用單位，等于1/72英寸

ppi: pixel per inch，每英寸像素?cái)?shù)，該值越高，則屏幕越細(xì)膩

dpi: dot per inch，每英寸多少點(diǎn)，該值越高，則圖片越細(xì)膩

dp: dip，Density-independent pixel, 是安卓開(kāi)發(fā)用的長(zhǎng)度單位，1dp表示在屏幕像素點(diǎn)密度為160ppi時(shí)1px長(zhǎng)度

sp: scale-independent pixel，安卓開(kāi)發(fā)用的字體大小單位。

好了，看了這個(gè)我還是懵逼的

分一分類吧

設(shè)計(jì)稿其實(shí)就是用px，dp是在安卓開(kāi)發(fā)的時(shí)候轉(zhuǎn)換使用的，安卓的多樣和手機(jī)屏幕像素密度的不同，為了設(shè)計(jì)圖能夠適配不同的設(shè)備屏幕，所以有了這么一個(gè)單位。（很多的混淆都是在這里發(fā)生的。這個(gè)問(wèn)題不清楚會(huì)導(dǎo)致后期的切圖適配得不到想要的效果）