作為前端工程師，當(dāng)您開(kāi)始編碼時(shí)，通常會(huì)有產(chǎn)品文檔，交互式原型，注釋和剪切圖像資源。開(kāi)發(fā)人員只需按照這些資源的說(shuō)明將內(nèi)容集成到自己的代碼中即可完成工作。但是，俗話說(shuō)，產(chǎn)品的設(shè)計(jì)不利于開(kāi)發(fā)。在越來(lái)越高潮的“全棧工程師”中，一個(gè)合格的前端應(yīng)該明白，開(kāi)發(fā)手中的原材料意味著什么。以這種方式編寫(xiě)的代碼可以更好地滿足需求并改善產(chǎn)品的最終體驗(yàn)。前端本身也可以在這個(gè)過(guò)程中有更多的想法，并培養(yǎng)自己的能力的各個(gè)方面。
現(xiàn)在，我們應(yīng)該跳出自己的工作站，看看產(chǎn)品的所有需求，經(jīng)歷了什么樣的過(guò)程，并掌握在自己手中。以下過(guò)程是典型的，但它可能或多或少與每個(gè)人的實(shí)際情況不同，但總體思路大致相同。
產(chǎn)品文章
實(shí)際上，需求的開(kāi)始源于用戶，我們的產(chǎn)品經(jīng)理捕獲，優(yōu)化和集成了這些分散的需求，從而產(chǎn)生了我們的開(kāi)發(fā)對(duì)象——產(chǎn)品。前端將要實(shí)現(xiàn)的各種邏輯和功能點(diǎn)逐一對(duì)應(yīng)于這些要求。可以說(shuō)這些功能是產(chǎn)品的靈魂。作為開(kāi)發(fā)，您可以獲得產(chǎn)品經(jīng)理編寫(xiě)的原型，文檔，思維導(dǎo)圖等。雖然它們形式各異，但它們都旨在讓開(kāi)發(fā)人員了解該產(chǎn)品的功能點(diǎn)和基本架構(gòu)。
產(chǎn)品類文檔可能不像交互式文檔，視覺(jué)注釋甚至讀取那樣接近開(kāi)發(fā)而不影響前端。但是，這些文檔允許開(kāi)發(fā)查看整個(gè)產(chǎn)品，使開(kāi)發(fā)能夠掌握每個(gè)功能點(diǎn)的重要性和重要性，這有助于基于產(chǎn)品本身開(kāi)發(fā)代碼，降低維護(hù)后成本，并間接提高開(kāi)發(fā)效率。
例如，通過(guò)文檔認(rèn)真負(fù)責(zé)的開(kāi)發(fā)了解到產(chǎn)品可能會(huì)考慮在未來(lái)添加皮膚功能，然后他可能會(huì)在開(kāi)發(fā)過(guò)程中有意識(shí)地保留一些小的界面進(jìn)行文本顏色調(diào)整，這對(duì)將來(lái)來(lái)說(shuō)很方便。更新的迭代消除了將來(lái)重寫(xiě)代碼的痛苦。
例如，對(duì)產(chǎn)品靈魂的深刻理解使開(kāi)發(fā)人員能夠編寫(xiě)更靈活，更高效，更貼心的更好的代碼。
互動(dòng)文章
如果產(chǎn)品是由各種功能組成的瑞士軍刀，則合理地布置軍刀的每個(gè)刀片的位置，從而可以正確地執(zhí)行每個(gè)刀片的功能，這是交互設(shè)計(jì)者的任務(wù)。交互設(shè)計(jì)者的工作內(nèi)容分為兩部分：一部分是信息架構(gòu)，另一部分是交互細(xì)節(jié)。
一個(gè)產(chǎn)品可能有幾十種功能，而且有幾十種信息，如果放在手機(jī)屏幕上5英寸上下，就會(huì)變成一個(gè)裝滿奇怪刀片的“刀球”，用戶無(wú)法啟動(dòng)，甚至安靜的水果是無(wú)法做到的。因此，交互設(shè)計(jì)者需要合理地“隱藏”產(chǎn)品各個(gè)層面的各種功能和信息。每個(gè)功能和信息都可以在適當(dāng)?shù)募?jí)別顯示，但不能隱藏得太深，以至于用戶無(wú)法找到它。轉(zhuǎn)到所需的功能。這是信息架構(gòu)的安排。合理的信息架構(gòu)允許產(chǎn)品的功能出現(xiàn)在最合適的場(chǎng)景中，以便用戶可以找到他想要的東西。
交互細(xì)節(jié)更像是刀的感覺(jué)。如何優(yōu)化各級(jí)功能和信息的布局，位置和響應(yīng)，使用戶能夠感受到“一人一人”的感覺(jué)，使功能不僅顯得恰到好處。 ，也可以很容易地使用，例如下面的例子。
例如，我們可以看到交互直接影響用戶是否可以正確播放產(chǎn)品功能。功能是靈魂，互動(dòng)是推動(dòng)靈魂的骨架。
大量功能和信息的分類與腦細(xì)胞的發(fā)育相同。交互設(shè)計(jì)人員需要在界面復(fù)雜性，級(jí)別深度和某些產(chǎn)品特殊需求之間進(jìn)行適當(dāng)和合理的權(quán)衡。符合要求的合理的交互式文檔，即界面簡(jiǎn)單易懂，層次結(jié)構(gòu)淺，易于用戶查找功能，并有指導(dǎo)用戶的合理障礙。經(jīng)過(guò)復(fù)雜的權(quán)衡，你得到的是一個(gè)交給開(kāi)發(fā)的交互式文檔。
對(duì)于前端，交互式文檔指示開(kāi)發(fā)將對(duì)功能進(jìn)行分類和布局。只要嚴(yán)格遵守交互式文檔的內(nèi)容，我們就可以確保最終產(chǎn)品具有美觀合理的信息結(jié)構(gòu)和交互細(xì)節(jié)。如果您嘗試更深入地學(xué)習(xí)，您可以掌握更多產(chǎn)品的內(nèi)涵，并了解有關(guān)產(chǎn)品本身的更多信息。
視覺(jué)文章
我記得曾與該項(xiàng)目合作的前高年級(jí)學(xué)生對(duì)我說(shuō)：“沒(méi)有必要進(jìn)行這樣詳細(xì)的注釋。事實(shí)上，我不這么認(rèn)為?！毙疫\(yùn)的是，大四的設(shè)計(jì)并不差，并且所做的事情沒(méi)有太大的偏差。但是，確實(shí)有一些前端有這樣的想法。畢竟，目前的手機(jī)具有幾百ppi的分辨率。一個(gè)或兩個(gè)像素和顏色值似乎沒(méi)有任何區(qū)別?？纯创蟾诺奈恢?。使用你的照片不好嗎？ ？
例如，以下兩個(gè)界面功能齊全，也是根據(jù)交互式文檔開(kāi)發(fā)的。只有一方嚴(yán)格恢復(fù)設(shè)計(jì)草案，而另一方只是“感覺(jué)”。
我們可以看到“感覺(jué)流”的界面。化身右側(cè)的信息內(nèi)容完全不對(duì)齊，右邊框未對(duì)齊。因此，當(dāng)用戶從上到下獲取信息時(shí)，他將看到鋸齒狀的信息標(biāo)題。部門需要不斷調(diào)整水平方向的視覺(jué)焦點(diǎn)。由于幾個(gè)像素的差異，整個(gè)信息流在用戶眼中變得雜亂，并且難以找到線索，這給用戶的閱讀帶來(lái)了極大的不便。
事實(shí)上，在產(chǎn)品中，視覺(jué)相當(dāng)于交互骨架外的皮膚，而皮膚的主要功能是裝飾。產(chǎn)品的視覺(jué)設(shè)計(jì)決定了產(chǎn)品是否美觀，并為用戶提供了愉悅的視覺(jué)體驗(yàn)。一個(gè)好看的用戶界面，像一個(gè)帥哥，讓人感到快樂(lè)。然而，除此之外，視覺(jué)設(shè)計(jì)還具有更深層次，更重要的功能，即引導(dǎo)用戶獲取信息。
就像產(chǎn)品瑞士軍刀一樣，我們擁有良好的刀片，合適的結(jié)構(gòu)和良好的外形設(shè)計(jì)，但我們不知道如何觸發(fā)和獲取隱藏在其中的功能和信息。在這個(gè)時(shí)候，視覺(jué)的更深層次的功能將發(fā)揮作用。
如果將文本和圖形概括為可視區(qū)域，則視覺(jué)區(qū)域的大小，顏色和甚至形狀將產(chǎn)生不同的影響和感受。通過(guò)有效地布置這些因素并合理地布置布局，可以有效地引導(dǎo)用戶。閱讀多個(gè)級(jí)別的信息，以了解不同的重要級(jí)別。交互設(shè)計(jì)師通過(guò)頁(yè)面區(qū)分級(jí)別，視覺(jué)設(shè)計(jì)師需要區(qū)分頁(yè)面級(jí)別和視覺(jué)體驗(yàn)。實(shí)際上，看似非常普通的界面有一層視覺(jué)排列，允許用戶在流中讀取多個(gè)信息，然后成為你眼中的“普通”界面。
詳細(xì)的注釋是使所有這些視覺(jué)安排有效的關(guān)鍵。由于變化很小，許多視覺(jué)元素的平衡真的被打破了。只有通過(guò)根據(jù)注釋仔細(xì)開(kāi)發(fā)界面才能實(shí)現(xiàn)預(yù)期的視覺(jué)效果。實(shí)現(xiàn)與效果圖相同的減少程度。
如果你進(jìn)一步理解它，它對(duì)于界面開(kāi)發(fā)肯定有很多意義。例如，開(kāi)發(fā)可以在響應(yīng)式布局，自動(dòng)布局等方面取得更多進(jìn)展。因?yàn)槟Ｍ詣?dòng)布局以獲得最佳結(jié)果，所以開(kāi)發(fā)應(yīng)該清楚地了解注釋圖中的哪些值是絕對(duì)不可變的，哪些值可以根據(jù)屏幕大小而變化。
實(shí)際上，由于設(shè)計(jì)通常不了解開(kāi)發(fā)所需的信息，因此通常會(huì)考慮注釋圖中的自動(dòng)布局和響應(yīng)性等因素。如果您此時(shí)對(duì)界面設(shè)計(jì)有了更深入的了解，您基本上可以確定可以用于自動(dòng)布局的位置。
總結(jié)
最后，我相信項(xiàng)目過(guò)程中的任何人都必須具備全球思維能力。在創(chuàng)建產(chǎn)品的過(guò)程中，開(kāi)發(fā)人員和設(shè)計(jì)人員必須注意上下游的各個(gè)方面，這樣才能真正提高產(chǎn)品的核心競(jìng)爭(zhēng)力。