Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

U.S. Supports Africa’s Bid for U.N. Security Council Seats, With a Catch

13 September 2024 at 02:48
The announcement provides U.S. support to permanent council seats for African nations, though not new veto powers. But the path to adding members requires far more than White House approval.

A to Z of Landscapes: Wind

By: hoakley
19 July 2024 at 19:30

In this alphabet of landscape painting, we’ve covered two of the four ancient elements, in earth and various bodies of water, but not yet touched on air. Therefore the letter w is for wind, a real challenge to paint.

The most florid paintings of wind are in seascapes, where its effects are most immediate.

Snow Storm - Steam-Boat off a Harbour's Mouth exhibited 1842 by Joseph Mallord William Turner 1775-1851
Joseph Mallord William Turner (1775–1851), Snow Storm, Steam Boat off a Harbour’s Mouth (1842), oil on canvas, 91.4 x 121.9 cm, The Tate Gallery (Accepted by the nation as part of the Turner Bequest 1856), London. Photographic Rights © Tate 2016, CC-BY-NC-ND 3.0 (Unported), http://www.tate.org.uk/art/artworks/turner-snow-storm-steam-boat-off-a-harbours-mouth-n00530

JMW Turner was one of the great masters of the shipwreck/storm maritime scene. My favourite example is this Snow Storm, Steam Boat off a Harbour’s Mouth (1842). This was the work for which it was claimed that Turner had himself lashed to the mast so that he could observe the storm properly, almost certainly false and quite unnecessary anyway: as a seasoned Channel traveller, Turner would have had ample previous experience. This also shows one of Turner’s most distinctive features in painting storms, the vortex, with his subject seen in its central eye. Although not exactly natural, it has proved atmospheric.

balkeharbourskjervoy
Peder Balke (1804–1887), The Harbor at Skjervøy (c 1844-46), oil on paper on cardboard, 12 x 17.5 cm, Private collection. The Athenaeum.

Peder Balke takes advantage of the rich clues provided in The Harbor at Skjervøy (c 1844-46). In this small fishing port in Troms, in the far north of Norway, the wind fills the sky with wheeling seabirds, heels the yachts, turns the sea white from breaking waves, and drives distant smoke almost horizontally.

Oude Scheld - Texel Island, Looking towards Nieuwe Diep and the Zuider Zee exhibited 1844 by Clarkson Frederick Stanfield 1793-1867
Clarkson Frederick Stanfield (1793–1867), Oude Scheld – Texel Island, Looking towards Nieuwe Diep and the Zuider Zee (1844), oil and bitumen on canvas, 100.3 x 125.7 cm, The Tate Gallery (Presented by Robert Vernon 1847), London. © The Tate Gallery and Photographic Rights © Tate (2016), CC-BY-NC-ND 3.0 (Unported), http://www.tate.org.uk/art/artworks/stanfield-oude-scheld-texel-island-looking-towards-nieuwe-diep-and-the-zuider-zee-n00404

Clarkson Frederick Stanfield made his reputation from marine paintings showing the effects of wind and waves. In the summer of 1843, he toured the Netherlands, finding fresh motifs for his oil paintings, including Oude Scheld – Texel Island, Looking towards Nieuwe Diep and the Zuider Zee, completed in his studio the following year. Its fragmented clouds are paralleled by the frequent small waves, together building the effect of a brisk offshore breeze. The critics loved it.

courbetautumnsea
Gustave Courbet (1819–1877), Autumn Sea (1867), oil on canvas, 54 x 73 cm, Ohara Museum of Art 大原美術館, Kurashiki, Japan. Wikimedia Commons.

Late in his career, Gustave Courbet’s coastal paintings came to concentrate on waves breaking on the beach, as in his Autumn Sea from 1867, where two sailing boats are the only forms to punctuate its horizon. They are heeling in the wind, which is also starting to blow the tops off the waves, as those dirty clouds scud rapidly across the sky.

On land, though, the painter has to work harder to convince the viewer, enlisting the help of trees and their foliage, and even washing hung out to dry.

gainsboroughcottagechurch
Thomas Gainsborough (1727–1788), Landscape with Cottage and Church (1771-72), oil on canvas with some black chalk, 61.6 x 69.2, Yale Center for British Art, New Haven, CT. Wikimedia Commons.

Thomas Gainsborough’s sketchy Landscape with Cottage and Church (1771-72) is one of the first works to use angled highlights over the foliage of trees to make them appear as if they’re moving in the wind, and its style was far ahead of its time.

daubignoctober
Charles-François Daubigny (1817–1878), October (date not known), oil on canvas, 87.5 × 160.5 cm, Rijksmuseum Amsterdam, Amsterdam. Wikimedia Commons.

Although trees are a help when depicting wind, Daubigny’s undated October manages very well with the tell-tale smoke rising from burning stubble.

courbetgustofwind
Gustave Courbet (1819–1877), The Gust of Wind (c 1865), oil on canvas, 146.7 × 230.8 cm, Museum of Fine Arts, Houston, TX. Wikimedia Commons.

Gustave Courbet shows how a ‘leaning’ sky can amplify the windswept branches, in The Gust of Wind from about 1865.

milletgustofwind
Jean-François Millet (1814-1875), The Gust of Wind (1871-73), oil on canvas, 90.5 x 117.5 cm, National Museum of Wales / Amgueddfa Cymru, Cardiff, Wales. Wikimedia Commons.

Although it depicts more extreme conditions, Jean-François Millet’s Gust of Wind from 1871-73 must be the canonical painting of a storm. Its lone and distant figure is being blown almost double, as he’s nearly struck by a large branch torn from the tree to the left. Indeed, that tree is being uprooted, and its leaves pepper the storm sky at dawn.

parreirasventania
Antônio Parreiras (1860–1937), Ventania (The Windstorm) (1888), oil on canvas, 150 × 100 cm, Pinacoteca do Estado de São Paulo, São Paulo, Brazil. Wikimedia Commons.

Antônio Parreiras’ wonderful Ventania (The Windstorm) (1888) is not as extreme, but just as eloquent, again using a leaning sky to accentuate the arcs formed by the trees.

monetpoplarswindeffect
Claude Monet (1840–1926), Poplars (Wind Effect) (1891), oil on canvas, 100 × 73.5 cm, Private collection. Wikimedia Commons.

With the Impressionist emphasis on transient effects of light rather than weather, their paintings tend to be more subtle again, as shown in Claude Monet’s Poplars (Wind Effect) from 1891.

Gustave Caillebotte, Laundry Drying, Petit Gennevilliers (1892), oil on canvas, 106 x 151 cm, Wallraf-Richartz-Museum. WikiArt.
Gustave Caillebotte (1848–1894), Laundry Drying, Petit Gennevilliers (1892), oil on canvas, 106 x 151 cm, Wallraf-Richartz-Museum. WikiArt.

Some of the most effective aids for the depiction of wind are flags and drying washing. While Sisley used the former, Gustave Caillebotte painted two views in which a washing line gives the strongest clue as to the wind. This is his Laundry Drying, Petit Gennevilliers (1892), the windier of the two.

homerhurricanebahamas
Winslow Homer (1836–1910), Hurricane, Bahamas (1898), watercolor and graphite on wove paper, 36.7 × 53.5 cm, The Metropolitan Museum of Art, New York, NY. Wikimedia Commons.

Following his time at Cullercoats in England painting fisherfolk there, Winslow Homer’s simple and effective watercolour of Hurricane, Bahamas (1898) should come as no surprise.

stuckstorm
Franz von Stuck (1863–1928), Storm Landscape (c 1920), oil on panel, 60 × 62.5 cm, Private collection. Wikimedia Commons.

Although not famous as a landscape painter, Franz von Stuck’s Storm Landscape (c 1920) leaves the viewer in no doubt.

A to Z of Landscapes: Valleys

By: hoakley
11 July 2024 at 19:30

In this alphabet of landscape painting there are several strong contenders for the letter v. Volcanoes make for thrilling views, but are unusual apart from those of Vesuvius. Views of Venice, or vedute, have become a specialist sub-genre in their own right. I have therefore chosen the more general theme of valleys instead.

Two approaches have been popular to make the valley the theme of a landscape painting, depending on the viewpoint chosen. If the artist decides to paint from within the valley, then they will de-emphasise its surrounding uplands. If the chosen viewpoint is above the valley, then any surrounding hills will naturally appear distant and subsidiary.

dahlkaupanger
Johan Christian Dahl (1788–1857), Landscape in Kaupanger with a Stave Church (1847), oil on canvas, 42.5 x 66 cm, Private collection. Wikimedia Commons.

JC Dahl’s Landscape in Kaupanger with a Stave Church from 1847 opts for the former technique, its hills made vague and shrouded in low cloud, and the valley in the foreground painted in higher chroma and greater detail. Dahl had to employ a little deception as this church had been modified structurally and looked quite different at the time, so substituted the stave church at Vang, which was demolished shortly afterwards. Dahl stepped in and had it rebuilt in the Silesian Mountains for the Prussian King Friedrich Wilhelm IV.

Frederic Edwin Church (1826-1900), The Heart of the Andes (1859), oil on canvas, 168 x 302.9 cm, The Metropolitan Museum of Art, New York, NY. Wikimedia Commons.
Frederic Edwin Church (1826-1900), The Heart of the Andes (1859), oil on canvas, 168 x 302.9 cm, The Metropolitan Museum of Art, New York, NY. Wikimedia Commons.

Frederic Edwin Church’s huge masterpiece The Heart of the Andes from 1859 adopts a similar strategy, with its brightly-coloured birds and rich plant life in the foreground valley. At its heart is a cross, with two figures by it (detail below). Dressed as locals, one sits, facing the cross, while the other stands just behind the seated figure, looking in the same direction. The cross is made simply of wood, and appears to have been decorated with a floral garland. It’s partly obscured by the luxuriant wayside plants.

Frederic Edwin Church (1826-1900), The Heart of the Andes (detail) (1859), oil on canvas, 168 x 302.9 cm, The Metropolitan Museum of Art, New York, NY. Wikimedia Commons.
Frederic Edwin Church (1826-1900), The Heart of the Andes (detail) (1859), oil on canvas, 168 x 302.9 cm, The Metropolitan Museum of Art, New York, NY. Wikimedia Commons.
bierstadtlanderspeak2
Albert Bierstadt (1830–1902), The Rocky Mountains, Lander’s Peak (1863), oil on canvas, 186.7 x 306.7 cm, Metropolitan Museum of Art, New York, NY. Wikimedia Commons.

Just four years later, Albert Bierstadt’s The Rocky Mountains, Lander’s Peak (1863) focussed attention on the Shoshone in the foreground, while the rugged mountain of the title is faded into the far distance.

percyroadtolochturret
Sidney Richard Percy (1821–1886), On the Road to Loch Turret, Crieff (1868), oil on canvas, 61 × 96.5 cm, location not known. Wikimedia Commons.

Although the staffage in the foreground of Sidney Richard Percy’s On the Road to Loch Turret, Crieff (1868) appears routine, he has put similar emphasis on this valley near the market town of Crieff, on the busy road between Perth and Crianlarich. Percy’s track is more remote, and probably used by Highland drovers to take their cattle to market in Crieff, then a major outlet for livestock from further north in Scotland.

leaderwelshvalley
Benjamin Williams Leader (1831–1923), In a Welsh Valley (1909), oil on canvas, 102.5 x 153.5 cm, Private collection. Wikimedia Commons.

Benjamin Williams Leader’s In a Welsh Valley from 1909 dissolves the peaks of Snowdonia, North Wales, in vagueness, while its green valley is supersaturated.

The alternative approach of looking down on the valley is compositionally simpler, but requires careful attention to depth and perspective to avoid the valley appearing flat.

Samuel Palmer, The Golden Valley (c 1833-4), watercolour and gouache, 12.7 x 16.5 cm, Private collection. WikiArt.
Samuel Palmer (1805-1881), The Golden Valley (c 1833-4), watercolour and gouache, 12.7 x 16.5 cm, Private collection. WikiArt.

Samuel Palmer painted this view of The Golden Valley when he was living in Shoreham between about 1833-34. This looks down from the Weald of Kent just as the harvest is being brought down to the valley below.

seddonmontparnasse
Thomas Seddon (1821–1856), Léhon, from Mont Parnasse, Brittany (1853), oil on canvas, 57.5 x 74.9 cm, Museo de Arte de Ponce, Ponce, Puerto Rico. Wikimedia Commons.

In the summer of 1853, the Pre-Raphaelite landscape artist Thomas Seddon visited Brittany, where he painted his first masterpiece of Léhon, from Mont Parnasse, Brittany. This shows the ruins of the monastery there, and has the distinctive look of Pre-Raphaelite landscape paintings in combining fine detail with an air of unreality.

This look is in part the result of the prolonged painting time to achieve the fine detail expected. Early plein air painters quickly learned that capturing a view so that it appeared natural required fast work for short periods, only an hour or two at most, in consistent lighting conditions over one or a very few sessions at the same time each day. To accomplish that, they sketched, and omitted detail. By setting himself the requirement of capturing such great detail, true to nature, Seddon made the painting process so protracted as to lose the coherent details of light, shadow, and surface effects that make a realist painting appear real.

awhuntnovrainbowdolwyddelanvalley
Alfred William Hunt (1830–1896), A November Rainbow – Dolwyddelan Valley, November 11, 1866, 1 p.m. (1866), watercolour, 49.5 x 74.9 cm, Ashmolean Museum, University of Oxford, Oxford. The Athenaeum.

A November Rainbow – Dolwyddelan Valley, November 11, 1866, 1 p.m. (1866) is one of Alfred William Hunt’s most celebrated paintings, with its elaborate composition and rich colours. It shows the valley of the River Lledr near the hamlet of Bertheos, on the eastern side of the Snowdon range in North Wales. He too de-emphasises the distant hills and floods the valley with light and detail.

blomfieldorakeikorako
Charles Blomfield (1848–1926), Orakei Korako on the Waikato (1885), oil on canvas, 50.6 x 76.3 cm, Museum of New Zealand Te Papa Tongarewa, Wellington City, New Zealand. Wikimedia Commons.

In 1885, Charles Blomfield painted the active geothermal area of Orakei Korako on the Waikato, with its geysers and hot springs. This is on the bank of New Zealand’s longest river, in the North Island, and views the valley from above.

medizpelikandurnsteinoverdanube
Emilie Mediz-Pelikan (1861–1908), View from the Dürnstein Ruins over the Danube Valley (c 1900), oil on paper, 34 x 50 cm, location not known. Wikimedia Commons.

My final example is this View from the Dürnstein Ruins over the Danube Valley painted from above by Emilie Mediz-Pelikan in about 1900. In the foreground are the ruins of Dürnstein Castle, near Krems, with the River Danube below, meandering tightly from the top. She has cropped out the hills that might have distracted from her superb view of the Danube Valley.

App 表单校验时机探索

By: 李瑞东
17 August 2022 at 14:14

动机

在我接手 App 这波需求迭代的时候,发现一个很常见的问题却没有在设计规范里提到过(其实原本也没啥设计规范…)。那就是:表单的校验时机。

工作中我发现每个保存到数据库的表单都会有至少一个校验规则,最常见的是字数,其他的有类似格式(邮箱、数量)、上下限(价格、库存数)等。而表单的校验时机通常是在三种方式内选择:

  1. 输入中校验;
  2. 失焦后校验;
  3. 提交时校验。

由于接手时并没有规范或者指引帮助我如何判断使用哪种,工期紧张也没有足够时间去探索,我只能拍脑袋地大部分都采取了「失焦后校验」的方法。

后面我发现这其中的差异还是挺耐人寻味的,有必要探索三者之间的各自优劣势和适用场景,于是乎就有了这篇文章。

三种校验时机的差异

输入中校验

效果:输入过程中(即文本有更改时)校验并反馈报错文案。
优点:实时反馈,出错后立即提示。
缺点:容易误判。即未完成输入就提示出错。

适用场景:
1. 纯前端能满足校验需求时;
2. 校验规则较严苛时,如一个表单多条校验规则,或中途某个错误字符直接影响到表单提交时。

修正错误的成本:低
在手机的的「键盘控件」内重新键入内容即可完成修正。

失焦后校验

效果:失去焦点后校验并反馈报错文案。
优点:输入过程中无干扰,在输入完成后再反馈报错文案。
缺点:失焦后才知道结果,修正成本高。

适用场景:
1. 纯前端能满足校验需求时;
2. 用户对输入框内容格式有预期时,如邮箱、手机号等。

修正错误的成本:高 ★★
需要先「失焦」,再回到原本的输入框「重新聚焦」,并通过「键盘控件」修正。

提交时检验

效果:提交表单时校验并反馈报错文案,通常会伴随着使用 Toast 提示。
优点:后端校验时,不影响性能&体验。
缺点:报错反馈很不及时。

适用场景:
1. 大部分需要后端校验的表单。

修正错误的成本:较高 ★★★
需要先「提交表单」,再「找到」出错的的输入框,并「重新聚焦」原本的输入框,通过「键盘控件」修正。

至此,上面列出了三种校验方式的各自优劣势,对比后不难得出结论。

结论

推荐优先使用「输入中校验」的规则。

原因:
1. 反馈最及时;
2. 修正错误的成本最低;
3. 对研发工作量和 App 性能无影响(前端校验时)。

理论支撑:

“理想情况下,所有验证都应该是内联的…”
“…在字段完成后立即修复错误对用户的交互成本最低…”
—— 来自 Nielsen Norman Group 的《如何反馈表单中的错误:10 条设计指南

通过这次的对比,我决定了之后都将「输入中校验」作为主要的校验方式,当然这种方式也有一些不适用的场景,此时就需要换一种校验方式。举例一些常见的不适合用「输入中校验」的表单:

  1. 容易误判的表单,如校验邮箱、电话、网址的格式时;
  2. 设置了数量下限时,如公司业务里的 B2B 商品设置了起批量时;
  3. 需要后端校验时,如需查重或对比数量上下限时。

其他感悟

对需要后端检验的表单态度

因为涉及到后端检验,意味着需要网络,那就会出现加载中/超时/加载失败/加载成功 的情况,所以这种表单一般是失焦后或提交时检验,这对输入体验会相对友好一些。

但也有例外,比如 Twitter 账号在重命名时,就使用的是输入中校验。可能是因为 Twitter 用户量庞大,特别容易重名。提交后检验反而效率更低。

输入前的体验设计

常言道好的体验设计能减少用户出错,在表单输入之前,实际上我们也可以用多种方式明示暗示文本框的填写规则。

一、输入框长度

输入框长度能过暗示文本框的预期填入内容。比如在填地址和邮编时,通常地址我们会预留比较宽的输入框给用户填写,而邮编则可以相应缩减,因为这两个类型的字段,预期填写的文本长度是有明显不同的。

参考资料:整齐划一?不如错落有致。| Ant Design 4.0 系列分享

二、实时字数显示

在输入框旁边实时展示当前字数和上限是也是比较常见的做法。
优点:避免出错;让用户对表单的规则有一个预期。
缺点:页面出现过多此类提示会使页面臃肿,反而会增加视觉&认知负荷。

所以我对这个做法的态度是:每个表单都会有文字输入的上限,超过上限时也一定会禁止提交、出现提示。但是否将字数提示常驻展示,取决于「用户对长度是否有预期」。

比如在一些备注、描述、说明等大段文字里,用户可能会输入到大段文本,但又对这些输入框的上限没有预期,那我这里判断到是需要出现实时字数提示的。而像比如填写姓名、添加标签这种,字数上限只是一个兜底的判断逻辑,不需要特意暴露出来。

另外可以根据存量数据来决定是否展示实时字数提示。比如让后端同事帮忙导出在数据库里的数据,能知道用户在这个输入框里一般会填写多少个字,如果大部分情况都是接近字数上限的,意味着用户在这个输入框会输入较多的文本,此时就需要展示当前字数上限,甚至或者调整校验规则。这是我在上一家公司(千聊)里做过的事情。

三、占位符(Placeholder)

无论是 NNGROUP 还是 Shopify UX,都对占位符文本持有比较谨慎的态度,甚至会用到 Harmful、Avoid 等贬义词。他们主要批判的是用占位符代替标签的做法,我们在使用时避免这种用法就好了。

实际上占位符和标签共同使用时没什么毛病,占位符确实能起到一定的补充作用,用来提示要输入内容的类型和名称,只是不要用来展示重要内容和代替掉标签就好了。合理使用也是减少用户出错的方式之一。

四、常驻帮助文本(Help text)

帮助文本可以视为占位符的进阶版,具体效果在输入框附近常驻一段简短、必要的说明内容,帮助商家了解输入框所要求的格式,或输入后的内容会怎么处理。甚至还可以链接到 FAQ,有丰富的用法。

一条原则

在文本有上限的输入框里,我们会面临一个选择是:超过字数后是否允许输入?

我在这里的建议是允许继续输入,同时会出现报错的反馈,告知规则。因为翻查了很多 UX 资料,都建议在设计中要避免「打断了用户行为」。下面放出两种方法的优劣对比,各位看官理性抉择:

超上限后允许继续输入
效果:输入的文本超过该文本框校验规则上限时,出现报错反馈,同时也可以继续输入文本。
优点:反馈及时,原因清晰。
缺点:🤔…

到达上限后禁止输入
效果:输入的文本到达该文本框校验规则的上限时,禁止输入更多的文字了。
优点:🤔…
缺点:没有反馈,不知道错误原因。

这么看下来,就体验而言是「超出上限后允许继续输入」要好很多。而且这种方法还照顾到一个场景是:允许用户在输入中发现超出长度后,把当前的单词输入完整后再去删减其他内容。

当然毫无疑问,到达上限后直接不允许输入是对设计和研发来说最省力的做法。这种做法下不用反馈,也就不需要做反馈时机的决策、反馈的文案及多语言、文本的适配、反馈后的布局适配…

我有一段经历是项目工期巨紧张,规范也没相关的指引。当时有很多比制定文本输入规则还重要的事情需要处理,于是乎我就都一拍脑袋用了「达上限后禁止输入」的方法。

后面与其他方式对比发现这种做法应该是体验比较差的做法了。像现在我把规范做法加进 App 设计的指引里面之后,就大多数情况下都会使用「允许继续输入,在输入中反馈」的方式实现。

结语

以上内容就是目前来说我对文本框校验规则的一些认识,包含了各种校验时机的对比,输入前的体验设计,以及不打断用户操作的原则。

这次的总结是我挺久之前就想干的事情了,因为平常工作中一直遇到这种问题,也没有一个明确的设计指引能够参考,现在自己写下来这篇笔记之后,之后的设计方案会考虑得更周全,说服力也更强了(希望是吧)…

同时再浅挖一个坑:之后要探索下表单提交按钮相关知识,比如说什么时候要禁用按钮,什么时候是允许点击但报错等等,这个应该还要复杂一点…

参考资料

❌
❌