&

<rp id="7smtt"></rp>

平面設(shè)計(jì)

工業(yè)設(shè)計(jì)

首頁(yè) -> UI交互頻道 -> 專業(yè)技術(shù) -> 教程文章

你應(yīng)該知道的產(chǎn)品設(shè)計(jì)14招

作者：UISDC 來(lái)源：UISDC ：

9、界面設(shè)計(jì)

當(dāng)我或者客戶準(zhǔn)備好線框圖原型之后，我更傾向于將它們合并到一個(gè)PSD文件中去。接下來(lái)，我會(huì)琢磨界面交互，點(diǎn)擊不同的地方會(huì)產(chǎn)生什么效果。在這個(gè)過(guò)程中，我們常常能發(fā)現(xiàn)缺失的環(huán)節(jié)和需要補(bǔ)充的界面，以及其他的錯(cuò)誤，這些都是客戶和我們最初考慮不周全的地方。如此一來(lái)，我便可以將所有的界面和元素放在一起，綜合起來(lái)看。當(dāng)我面對(duì)一個(gè)擁有15屏的APP界面設(shè)計(jì)稿的時(shí)候，就會(huì)發(fā)現(xiàn)讓它們保持統(tǒng)一風(fēng)格是一件很難的事情，最初的設(shè)計(jì)準(zhǔn)則也因此需要調(diào)整。

三種不同的標(biāo)識(shí)線，第一種是帶數(shù)字標(biāo)號(hào)指向下一屏的，第二種是屏內(nèi)指引線，第三種是指向外部應(yīng)用和鏈接的線。

含聯(lián)系人的預(yù)覽圖

完整預(yù)覽圖

關(guān)于樣式——我所使用的原型設(shè)計(jì)樣式和很多設(shè)計(jì)師差不多，但是比起耗費(fèi)大量的時(shí)間去繪制復(fù)雜的指引線展示交互過(guò)程，我更愿意使用代表下一屏的數(shù)字標(biāo)號(hào)和簡(jiǎn)單直觀的指引線來(lái)展示我的設(shè)計(jì)。這種方式有點(diǎn)兒像過(guò)去老范兒的游戲說(shuō)明書(shū)，但是它比起印刷電路板般的指引線地圖要好的多。如此一來(lái)，你便可以在整張圖上看到更多有效的信息。

為此我附上PSD，讓你更容易理解我的想法。
C、后期處理(設(shè)計(jì)規(guī)范)

終于接近尾聲了，最后一個(gè)部分是創(chuàng)建設(shè)計(jì)規(guī)范，檢查并確保視覺(jué)的一致性。事實(shí)證明，這一環(huán)節(jié)是項(xiàng)目中極為重要的一個(gè)部分，不論項(xiàng)目是大是小。在大型項(xiàng)目中，如果要改變某些組件的屬性，通常我是無(wú)法100%確定是不是把所有相關(guān)組件都改過(guò)來(lái)了。有了設(shè)計(jì)準(zhǔn)則之后，我們就能確保UI中不會(huì)出現(xiàn)50種不同濃淡的灰色和14種不同尺寸的字體。