亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

輸入框常用于表單中明細項目內容的補充和對應的數(shù)據錄入的功能；在醫(yī)院的業(yè)務流程中這也是最基礎的表單套件，多數(shù)情況都是以組合情況出現(xiàn)，基本是多行，或者多列的情況比較多；在長時間的使用中我們會產生很多問題；

設計時輸入框的長度是不是固定的？

輸入框輸入的內容是不是有關聯(lián)性，如果有，他應該如何關聯(lián)

輸入框如何放在容器中，與他對應的屬性名應該如何放置？

什么時候使用輸入框而不是其他的組件

......

基于以上的問題，且隨著我們在不同的場景中深入使用，如何能夠讓用戶擁有一份良好的用戶體驗變成了難題，或者換句話說，如何在不同的容器中準確的使用，讓功能的體驗變得和諧已經是重中之重了。

想要了解這個問題，我們需要了解輸入框Input的使用場景，即是什么的問題，然后它具有什么特征，他是如何影響布局等等問題，結合上述描述；我打算從幾個方面論證上述問題，首先就平常的用戶畫像中所面對的群體，輸入框該有哪些輸入特征，接著我討論一下輸入框（Input）在設計時的所遵循基本變量從而分析一下該如何使用及其為什么這么使用的原因，最后由對應這些基本變量所推導出較為通用的輸入框在界面中的布局原則 。

那么輸入框設計時候基本變量是什么呢？

我們打算從 輸入順序 ，輸入位置 ，輸入長度這三個元素開始討論，在這之前我們先看看我們平常使用的基本輸入框有哪些；即它是什么的問題

一 . 基礎元素

任何一個組件都需要有默認，移入，禁用，錯誤和成功等狀態(tài)的反饋

在一般的輸入框的使用場景中，默認大小輸入框使用的頻次最高的，對應較大的尺寸一般使用在網頁頭部，或者使用在需要明顯告知輸入的位置，使用的頻次是最少的，而對應的小尺寸的一般用于另一個組件，比如在table中的行內編輯

當然這種小尺寸使用的頻次也是比較少的，但是與大尺寸一樣，他們在規(guī)范中也是必須要有的 

我們不建議在組件之后添加文案，第一從設計的總體性來說這種用法是割裂的，如果從組件庫的整體性來說前端開發(fā)會重復添加文案，復用性有限；

還是上面原因，組合式的設計組件可以添加到組件庫，形成復用的概念，如果重復添加兩個組件在設計的效率上會減少很多，而且開發(fā)的效率減少很多，而且從長遠的角度看，不利于從長期積累中形成自己的對于用戶的思考。

第一就是對于一些基本的字數(shù)長度或者數(shù)據的類型的用戶提示我們并不需要用補充文字來告之，第二方面是沒有必要動用過多的資源，成本低，再一個，更重要一點就是對應警告的這種提示會讓用戶變得緊張，所以并不是濫用的條件，需要克制

在醫(yī)院的業(yè)務場景中，文書和表單的打印占有很大的一部分業(yè)務比例，在所見即所得的設計業(yè)務中，我們并不需要對應有邊框的輸入框。

這樣我們就有了對應基本元素，那么在具體的元素如何呈現(xiàn)在頁面中的設計原則；組件與組件的聯(lián)系該怎么相互關聯(lián)，他們之間的順序又是什么樣子的，他們的長度的信息和填寫的舒適度又是按照什么原理？

二. 設計原則

在說下面的論述之前，我們有一個必須要明確的總基調或者說對應的設計總原則

在醫(yī)院的設計場景中所有的組件的使用；都是注重效率為前提，在低成本和高效率的之間相互平衡

所以我們希望用戶能夠快速且準確把對應的信息填寫完整

01.元素位置

我們可以先看一個頁面

對于這個界面，第一眼看上去的感覺，好像也沒有什么問題，但是仔細一看，用比較感覺性的話語描述就是感覺很規(guī)整，但是組件之間的關系不是很明確。我們做一下修改

在這個版本中我修改對應的輸入框的位置，讓整個視覺的中心來到了左上；這個時候我們會感覺到會舒服了一點，至少組件之間的邏輯更加清晰了一點 ，其實這里面我們需要保證親密性的設計原則

如果信息之間關聯(lián)性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結構和信息層次一目了然。https://ant-design.gitee.io/docs/spec/proximity-cn 

我們可以分析一下，如下圖：

看到上圖中作為紅色區(qū)域的整體, 從業(yè)務上他們應該是一體的，你可以理解這部分區(qū)域為視覺的中心，所以他的外邊距應該是大于內部的邊距這樣我們會自然不自然的把內部看成一個有效的組合，這種設計思想我們可以從word的使用時候會設置頁邊距是一個道理；

但是你會發(fā)現(xiàn)我的外邊距的距離并不一致；

這是因為人眼在觀察電子設備的時候會習慣性的從左上部分開始獲取信息的習慣；

Jacob Nielsen （尼爾森）首先提出該模式后并提供了眼球追蹤研究結果，關注流順序如下圖。按鈕跟隨內容模式在以下的這個中被證明非常自然。

所以說在設計的時候能夠可以讓你關注或者需要填寫的內容適當?shù)奶幱谝曈X的左上，會更加有利于用戶更快速獲取信息；這一點在越大的背景的容器中這種設計者的故意你越感受的很明顯

而以上所說就是組件的位置原則，首先他需要符合親密性的原則，然后他需要符合人的瀏覽習慣，這樣作為一個設計組件的位置信息我們就可以有一個明確的指導；這一位置原則也適用于不同的組件不僅包括輸入框；

02.元素長度

我們再回到上面那個設計稿； 他是不是已經完事了？ 答案肯定是不 ！ 它還有修改空間，那就是長度；

很顯然，落實到具體的設計項目中；我們發(fā)現(xiàn)，輸入框的長度至少要符合一定程度上用戶的預期；每一個字段就應該對應著差不多長度，而且從設計的布局效果上來看，這種長短不一的錯落會比一種模式更有呼吸感；如圖

由此，用戶預期的長度應該是什么樣的效果，假定每一個字段都有一個對應的預期的預期長度，那么從設計的指導意義上來說其實并沒有意義；我們需要的應該是幾種長度模式來概括出普遍的情況；這樣我們就可以在設計和開發(fā)組件庫的時候有據可循；當然最終的答案是有的；根據普遍的填寫場景；我們可以定出大概幾種尺寸；如上圖；至于各種長度又是如何推導出來的你可以看這里 https://zhuanlan.zhihu.com/p/110096160 

3.元素順序

上面我們已經論證長度和對應的元素位置；那么只缺少了對應的組件的前后順序問題；如果需要論證順序這個問題那就要結合具體的業(yè)務來表述了；比如這是一個對應的新用戶注冊頁面中；我們需要用戶把對應重要的信息先行填寫；可選的信息或者不重要的信息后一步填寫；這樣我們試想一個場景；一個用戶注冊的字段假如有很多類型；而此時用戶想快速填寫一份表單由于設計原則從重要程度排列【那也就意味著選填的項目會一直在后面】，這樣用戶就可以用最少的注意成本在填寫最少的類型上最終以最快速度保存。

三 . 總結

所以綜上所述，我們輸入元素的位置可以根據 元素之間的親密性關系 來確定；再加上用戶 瀏覽電子設備的使用習慣 元素就可以確定，接著我們通過 用戶的輸入期望，可以模糊的將輸入框的長度分為幾種類型，最后考慮到業(yè)務之間關系的重要程度和對應一些邏輯關系【比如需要先填什么才能后填什么的邏輯】，這三種設計原則的共同指導下；就可以獲取到一個比較全面的設計規(guī)范 如上圖；

微信公眾號：設計一論

Powered by Froala Editor